2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Grid_Tracks.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-grid-tracks	CSS Grid Tracks	Frontend	draft	conceptual		grid tracks grid-template-columns grid-template-rows fr unit repeat function minmax function		B	0.90	2026-06-23	2026-06-23			css web frontend w3schools grid tracks	https://www.w3schools.com/css/css_grid_tracks.asp

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]

.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]

.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]

.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]

.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]

.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]

.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]

.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):

.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).