CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.
Table of Contents
- Grid Container
- Explicit Grid
- Minimum and Maxmum Grid Track Sizes
- Repeating Grid Tracks
- Grid Gaps (Gutters)
- Positioning Items by Grid Line Numbers
- Spanning Items Across Rows and Columns
- Naming Grid Lines
- Positioning Items by Line Names
- Naming and Positioning Items by Lines with the Same Name
- Naming and Positioning Items by Grid Areas
- Implicit Grid
- Implicitly Named Grid Areas
- Implicitly Named Grid Lines
- Layering Grid Items
- Aligning Grid Items (Box Alignment)
- Aligning Grid Tracks
Create a grid container by setting the
display property with a value of
inline-grid. All direct children of grid containers become grid items.
Grid items are placed in rows by default and span the full width of the grid container.
Explicitly set a grid by creating columns and rows with the
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
Minimum and Maximum Grid Track Sizes
Tracks sizes can be defined to have a minimum and/or maximum size with the
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.