Flash cards
Review the key moves
What is the main idea behind CSS Grid Tracks?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
.___ {Put the learning moves in the order that makes the concept easiest to apply.
CSS Grid Tracks (Rows and Colums)
Inside the grid container you define the number and size of the grid columns and rows.
For this, we will use the following properties:
- grid-template-columns - Defines the number and width of the columns in the grid
- grid-template-rows - Defines the number and height of the rows in the grid
- grid-template-areas - Defines how to display columns and rows, using named grid items
The CSS 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 are
- Fixed lengths (100px 300px 200px)
- Percentages (20% 60% 20%)
- fr unit (1fr 2fr 1fr)
- auto (auto auto auto)
- repeat() (repeat(3, 1fr))
- minmax() (minmax(80px, 1fr) 150px 150px)
CSS grid-template-columns: auto
To create a grid layout with 3 columns of equal width, use the "auto" keyword.
Example
.container {
display: grid;
grid-template-columns: auto auto auto;
}Live preview
Expected output
1 2 3 4 5 6
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".
Example
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}Live preview
Expected output
1 2 3 4 5 6
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.
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.
Example
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Live preview
Expected output
1 2 3 4 5 6
Example
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}Live preview
Expected output
1 2 3 4 5 6
Grid Columns with the repeat() Function
The CSS repeat() function is used to repeat a set of columns or rows in a grid.
Example
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Live preview
Expected output
1 2 3 4 5 6
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.
Example
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}Live preview
Expected output
1 2 3 4 5 6
The CSS 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 are
- Fixed lengths
- Percentages
- fr unit
- auto
- min-content
- max-content
- repeat()
- minmax()
- fit-content()
Example
.container {
display: grid;
grid-template-rows: 80px 200px;
}Live preview
Expected output
1 2 3 4 5 6 7 8
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.