CSS Grid Tracks
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 gridgrid-template-rows- Defines the number and height of the rows in the gridgrid-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
Create a grid with 3 columns of equal width:
.container {
display: grid;
grid-template-columns: auto auto auto;
}
Result:
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
Create a grid with a fixed size for column 1 and 2, and column 3 as auto size:
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}
Result:
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
Here, each column will take up 33.3% of the container width, splitting it equally:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Result:
Example
Here, the second column will be twice as big as the others:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Result:
Grid Columns with the repeat() Function
The CSS repeat() function is used to repeat a set of columns or rows in a grid.
Example
Use repeat() to create three equal-width columns in a grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Result:
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
Use minmax() to define that first column is at least 80px wide and can grow to 1fr:
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}
Result:
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
Set the first row in the grid to 80px high, and the second row to 200px high:
.container {
display: grid;
grid-template-rows: 80px 200px;
}
Result:
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.
