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
Grid Container
Create a grid container by setting the display
property with a value of grid
or inline-grid
. All direct children of grid containers become grid items.
display: grid
Grid items are placed in rows by default and span the full width of the grid container.
display: inline-grid
Explicit Grid
Explicitly set a grid by creating columns and rows with the grid-template-columns
and grid-template-rows
properties.
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 (px
, %
, em
, etc.)
Items 1 and 2 have fixed heights of 50px
and 100px
.
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 grid-template-columns
.
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 90px
, 50px
and 120px
respectively.
grid-template-columns: 1fr 1fr 2fr
The 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, 3rem
and 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 minmax()
function.
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
The 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 100px
.
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.