Loading lesson path
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:
Formula
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 - areasFormula
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.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)
To create a grid layout with 3 columns of equal width, use the "auto" keyword.
Create a grid with 3 columns of equal width:.container {
display: grid;
grid-template-columns: auto auto auto;
}To create a grid layout with 3 columns: 2 columns with a fixed width, and 1 column with size "auto".
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;
}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.
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.
Here, each column will take up 33.3% of the container width, splitting it equally:.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Here, the second column will be twice as big as the others:.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}repeat() function is used to repeat a set of columns or rows in a grid.
Formula
Use repeat() to create three equal - width columns in a grid:.container {display: grid;
grid-template-columns: repeat(3, 1fr);
}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 first column is at least 80px wide and can grow to 1fr:.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}Formula
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.