My Updated Notes on CSS Grid!

Created:
  • css

A Grid with 3 columns and 2 rows

display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 100px auto;

Notice that we can use different units for the track sizing.
The default track sizing is auto which means as big as the content.

1
2
3
4
5
6

Auto sized tracks

display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px 50px;

auto is the default track size for implicitly created grid tracks (tracks that you didn't explicitly ask to be created but were made anyway to accommodate grid items) like row-3 in this example.
auto sized column tracks will stretch to fill the grid container if there is extra space in the grid container.
auto sized row tracks will stretch to fill the grid container if there is extra space in the grid container. To see this you must set the height property on your grid container.
auto sized column tracks will not cause overflows. But auto sized row tracks can still overflow.

1
2
3
4
5
6
7
8
9
This example shows how setting column track size to auto will stretch the column tracks to fill the grid container. This occurs because the content of the three grid columns did not require much space, thus leaving extra space capable of being allocated to each column track to fill the grid container.
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px 50px;

Is this grid-item's content is very long? large?, whatever the case it should not overflow column-wise if the column track is set to auto. More words required to achieve the results we desire. Notice how column-2 and column-3 shrink their track sizes to their min-content (we will talk about min-content later).
2
3
4
55555
6
Example showing how setting column track size to auto will not lead to overflows column-wise.
Notice how column-2 and column-3 shrink their track sizes to their min-content (we will talk about min-content later).
height: 320px;
display: grid;
grid-template-columns: 100px 200px 400px;
grid-template-rows: auto auto;

1
2
3
4
5
6
Example showing how setting row track size to auto and setting an explicit grid container height will cause the row tracks to stretch if there is extra space in the grid container.
height: 320px;
display: grid;
grid-template-columns: 100px 200px 400px;
grid-template-rows: auto auto;

Is this grid-item's content is very long? large?, whatever the case this example demonstrates that it can possibly overflow if certain parameters are met.
2
3
4
5
6
Example showing how grid-items can overflow even if we set row-track sizes to auto.
Here grid-item-1 overflows because we limit the column-track size to 100px and set the row-track size to auto and of course our grid-container's height is limited to 320px.

Intrinsic sizing keywords - min-content

display: grid;
grid-template-columns: min-content min-content min-content;
grid-template-rows: auto auto;

The min-content keyword will make a track as small as it can be without the track content overflowing. Changing the example grid layout to have three column tracks all at min-content size will mean they become as narrow as the longest word in the track.

1 OneReallyLongWordSetsThe_MinContent_OfThisColumnTrack
2
3 A few words with whitespace
4
5
6

Intrinsic sizing keywords - max-content

display: grid;
grid-template-columns: max-content max-content max-content;
grid-template-rows: auto auto;

The max-content keyword will make a track wide enough to display all content in one long unbroken string. Might cause overflows as the string will not wrap.

1 One really long set of words sets will display as an one unbroken string when max-content is set as the column track size.
2
3 A few words with whitespace
4
5
6
Example showing max-content column track size.
1 One really long set of words sets will display as an one unbroken string when max-content is set as the column track size. This grid-item should cause us to overflow outside the grid container.
2
3 A few words with whitespace
4
5
6
Example showing max-content column track size causing an overflow to occur.

Intrinsic sizing keywords - fit-content()

display: grid;
grid-template-columns: 100px 100px fit-content(400px);
grid-template-rows: auto auto;

fit-content() keyword acts like max-content up to the input argument size you pass it, once it goes over it wraps.
Think of this as a max-width function, never allowed to grow past the input argument size.
So fit-content(400px) on the third column will create a track that is less than 400px, if the max-content size is less than 400px, but never larger than 400px.

1
2
3 This column track will act like max-content until it reaches 400px, then it will wrap because we set its column track size to fit-content(400px).
4
5
6
Example showing fit-content column track size.

The fr unit

display: grid;
grid-template-columns: 1f 1f 1fr;
grid-template-rows: auto auto;

The fr unit is a flexible length which describes a share of the available space in the grid container
It is similar to using flex: auto which sets
flex-grow: 1, items can grow larger than their flex-basis. Default is 0.
flex-shrink: 1, items can shrink smaller than their flex-basis. Default is 1.
flex-basis: auto, items have a base size of auto. Default is auto.
Essentially this means that items will be laid out as max-content and then whatever space is left is shared out equally because of flex-grow: 1.
I got this information from here.

1 I thought for sure that this column track would be wider than the others since I'm basing my understanding of it on its max-content being intrinsically wider than the other columns. But as it turns out that is not the case. All columns here are the same size.
2 ThisGridItemHasAVeryLongUnbrokenWordWhichWillInfluenceItsMinContentSize
3 This column is decently wide.
4
5
6
Example showing how three columns with track size 1fr are laid out. Suprisingly column track 1 is not wider than the others. So the fr unit does not work exactly like flexbox: autolayout does.
It is possible that grid layouts using the fr unit layout the content using min-content and then share the remaining space.

The minmax() function

display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;

The minmax() function is a clamp function, it lets you set a minimum and maximum size for a track
minmax(auto, 1fr) is exactly the same as just replacing 1fr in the above example with minmax(auto, 1fr) leads to the same result.
minmax(0, 1fr) can be used to force tracks to take an equal share of the grid container, i.e. same sized tracks.
This can lead to content being cut off like in grid item 2.

1 I thought for sure that this column track would be wider than the others since I'm basing my understanding of it on its max-content being intrinsically wider than the other columns. But as it turns out that is not the case. All columns here are the same size.
2 ThisGridItemHasAVeryLongUnbrokenWordWhichWillInfluenceItsMinContentSize
3 This column is decently wide.
4
5
6
Three equally sized column tracks using minmax(0, 1fr) can lead to content being cutoff.

The repeat() function

display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: 100px 100px;

The repear() function allows us to succinctly create repeating patterns of track sizes
If you want 12 equally sized column tracks, you could explicitly write minmax(0, 1fr) twelve times, or you could use repeat(12, minmax(0, 1fr)) instead.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Using the repeat() function to save us the trouble of writing this mess out.

auto-fill and auto-fit

display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: auto auto;

Useful if you don't want to explicitly state the number of column tracks, but instead want to automatically create as many as will fit in your container.

1
2
3
4
5
6
Example of repeating fixed sized tracks.
The grid layout will create as many 200px wide column tracks as will fit in the grid container. Change the viewport width to see this in action.
The problem is that there can be gaps at the end of the grid container when there is not enough space (200px) to add another column track. We will solve this in the example below.
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: auto auto;

1
2
3
4
5
6
Instead of setting all column track sizes to 200px we use the minmax() function with a minimum size of 200px and a flexible 1fr unit for the max. Now if there is extra space present at the end it is shared equally with all the tracks.
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: auto auto;

1
2
3
Using auto-fill will create empty tracks even if the grid container does not have enough children to fill those empty tracks.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: auto auto;

1
2
3
Using auto-fit will collapse empty tracks down to size zero allowing flexible tracks to consume this space.