docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: css-grid-tracks
|
||||
title: "CSS Grid Tracks"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["grid tracks", "grid-template-columns", "grid-template-rows", "fr unit", "repeat function", "minmax function"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.90
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "grid", "tracks"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_grid_tracks.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Grid Tracks]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Inside a grid container, `grid-template-columns` and `grid-template-rows` define the number and size of the grid tracks, using values such as fixed lengths, percentages, the `fr` unit, `auto`, `repeat()`, and `minmax()`. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Tracks = rows and columns** — inside the grid container you define the number and size of the grid columns and rows. [S1]
|
||||
- **`grid-template-columns`** — defines the number and width of the columns in the grid; the value is a space-separated list where each value defines the width of the respective column. [S1]
|
||||
- **`grid-template-rows`** — defines the number and height of the rows in the grid; the value is a space-separated list where each value defines the height of the respective row. [S1]
|
||||
- **`fr` unit** — stands for "fraction"; automatically divides the available space into fractions. [S1]
|
||||
- **`repeat()`** — repeats a set of columns or rows in a grid. [S1]
|
||||
- **`minmax()`** — defines a size-range greater than or equal to a min value and less than or equal to a max value. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Space-separated track list** — list one width/height value per track; the count of values determines the number of tracks. [S1]
|
||||
- **Auto-added rows** — if there are more grid items than columns, the grid automatically adds new rows to place the items. [S1]
|
||||
- **`repeat(n, value)`** — a compact way to declare `n` identical tracks (e.g., `repeat(3, 1fr)`). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
Inside the grid container you define the number and size of the grid columns and rows. The relevant properties are `grid-template-columns` (number and width of columns), `grid-template-rows` (number and height of rows), and `grid-template-areas` (how to display columns and rows using named grid items). [S1]
|
||||
|
||||
**The `grid-template-columns` Property**
|
||||
The `grid-template-columns` property defines the number and width of the columns in the grid. The value is a space-separated list, where each value defines the width of the respective column. Common values include fixed lengths (`100px 300px 200px`), percentages (`20% 60% 20%`), the `fr` unit (`1fr 2fr 1fr`), `auto` (`auto auto auto`), `repeat()` (`repeat(3, 1fr)`), and `minmax()` (`minmax(80px, 1fr) 150px 150px`). [S1]
|
||||
|
||||
**`grid-template-columns: auto`** — to create a grid layout with 3 columns of equal width, use the `auto` keyword. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
```
|
||||
|
||||
**Grid columns with mixed width** — to create a grid layout with 3 columns: 2 columns with a fixed width, and 1 column with size `auto`. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 200px auto;
|
||||
}
|
||||
```
|
||||
> **Note:** If you have more than 3 grid items in a 3 columns grid, the grid will automatically add new rows to put the items in. [S1]
|
||||
|
||||
**Grid columns with the `fr` unit** — the `fr` unit stands for "fraction". This unit automatically divides the available space into fractions. `1fr` will take 1 fraction of the available space, while `2fr` will take 2 fractions of the available space. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
```
|
||||
Here, each column will take up 33.3% of the container width, splitting it equally. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
}
|
||||
```
|
||||
Here, the second column will be twice as big as the others. [S1]
|
||||
|
||||
**Grid columns with the `repeat()` function** — the CSS `repeat()` function is used to repeat a set of columns or rows in a grid. Use `repeat()` to create three equal-width columns in a grid. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
```
|
||||
|
||||
**Grid columns with the `minmax()` function** — the CSS `minmax()` function is used to define a size-range greater than or equal to a min value and less than or equal to a max value. Use `minmax()` to define that the first column is at least 80px wide and can grow to 1fr. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(80px, 1fr) 150px 150px;
|
||||
}
|
||||
```
|
||||
|
||||
**The `grid-template-rows` Property**
|
||||
The `grid-template-rows` property defines the number and height of the rows in the grid. The value is a space-separated list, where each value defines the height of the respective row. Common values include fixed lengths, percentages, the `fr` unit, `auto`, `min-content`, `max-content`, `repeat()`, `minmax()`, and `fit-content()`. [S1]
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: 80px 200px;
|
||||
}
|
||||
```
|
||||
Set the first row in the grid to 80px high, and the second row to 200px high. [S1]
|
||||
> **Note:** Notice that the first row in the grid above is 80px high and the second row is 200px high. The next rows will use `auto` as default. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's own examples apply each track-definition technique to a `.container` with `display: grid`. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Define grid columns and rows (language: CSS):
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 80px 200px;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **`auto`** — sizes tracks to equal/content-based widths. [S1]
|
||||
- **Fixed lengths (`px`)** — exact, non-flexible track sizes. [S1]
|
||||
- **`fr` unit** — distributes available space proportionally into fractions. [S1]
|
||||
- **`repeat(n, value)`** — compactly declares `n` identical tracks. [S1]
|
||||
- **`minmax(min, max)`** — flexible tracks bounded between a minimum and maximum size. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[CSS Tutorial]]
|
||||
- **관련 개념:** [[CSS Grid Intro]], [[CSS Grid Container]], [[CSS Grid Gaps]]
|
||||
- **참조 맥락:** Referenced whenever defining the number and size of grid rows and columns.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Grid Tracks — https://www.w3schools.com/css/css_grid_tracks.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Tracks" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user