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