Grid items are placed in rows by default and span the full width of the grid container.
grid-template-rows: 50px 100px
A row track is created for each value specified for
grid-template-rows. Track size values can be any non-negative, length value (
Items 1 and 2 have fixed heights of
Because only 2 row tracks were defined, heights of items 3 and 4 are defined by the contents of each.
grid-template-columns: 90px 50px 120px
Like rows, a column track is created for each value specified for
Items 4, 5 and 6 were placed on a new row track because only 3 column track sizes were defined; and because they were placed in column tracks 1, 2 and 3, their column sizes are equal to items 1, 2 and 3.
Grid items 1, 2 and 3 have fixed widths of
grid-template-columns: 1fr 1fr 2fr
fr unit helps create flexible grid tracks. It represents a fraction of the available space in the grid container (works like Flexbox’s unitless values).
In this example, items 1 and 2 take up the first two (of four) sections while item 3 takes up the last two.
grid-template-columns: 3rem 25% 1fr 2fr
fr is calculated based on the remaining space when combined with other length values.
In this example,
25% would be subtracted from the available space before the size of
fr is calculated:
1fr = ((width of grid) - (3rem) - (25% of width of grid)) / 3
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
minmax() function accepts 2 arguments: the first is the minimum size of the track and the second the maximum size. Alongside length values, the values can also be
auto, which allows the track to grow/stretch based on the size of the content.
In this example, the first row track is set to have a minimum height of
100px, but its maximum size of
auto will allow the row track to grow it the content is taller than
The first column track has a minimum size of
auto, but its maximum size of
50% will prevent it from getting no wider than
50% of the grid container width.