Quick links

CSS grid and when to use it

CSS grid is a powerful layout tool useful for organizing elements in a two-dimensional layout; flexbox is best suited to one-dimensional layouts. With CSS grid, you can define various properties that let you place each element’s starting and ending edges precisely within your container.

While flexbox is best suited to content blocks within a page, CSS grid can be used to build entire webpages. grid-template-areas allows you to define sections of the grid with specific names (i.e. header and sidebar). Think of it like a movable scaffolding, or dividers in an organizer box that can be repositioned as needed.

Implementing CSS grid

Set display: grid; on the containing div to enable grid layout. The default arrangement will put every child element on its own row in a single column, and stretch it to fill the width of the container.

Grid templates and areas

The fr unit specifies a fractional portion of the total container size less any non-fractional sizes. For example, 1fr 3fr 2fr defines a total unit amount of 6 (1 + 3 + 2), divided fractionally by each number. The first section would be 1/6, the second 3/6, and the third 2/6 units. If you had one section of the grid defined in an absolute measurement (em, px, etc.) then the fr measurements would be relative to the remaining space.

The repeat function will duplicate specifications for rows or columns a given number of times. repeat(3, 100px) will create three 100px wide sections. repeat(2, 20px 50px); will create four columns (two sets of two) where the first and third columns are 20px wide, and the second and fourth columns are 50px wide.

When you want to set a section’s size within a range (similar to the CSS function clamp(...)), use minmax(minval, maxval).

Property Value(s) Example Usage
grid‑template‑columns HTML units: px, %, fr, em, etc. grid-template-columns: 200px 40% 150px; Define column sizes sequentially; don’t separate with commas.
grid‑template‑rows HTML units: px, %, fr, em, etc. grid-template-rows: 200px 40% 150px; Define row sizes sequentially; don’t separate with commas.
grid‑template‑areas "[...]" for each row grid‑template‑areas: "header header"
                     "sidebar main"
                     "footer footer";		 Defines named template areas; a row is created for each quote-enclosed string, and a column for each cell within that string. Create areas that span muliple columns by simply repeating the name of the area across those columns within that row. Implement this by setting an HTML element’s class="[area]" and adding the CSS for .[area] { grid-area: [area]; }.
grid‑area the name of the corresponding area set with grid‑template‑areas grid‑area: sidebar; Allows easy assignment of a particular element to a specific named section of the parent CSS grid. If there are no named sections, grid-area will require numerical values; see Defining element sizes below.
grid‑template [grid-template-areas] [grid-template-rows] / [grid-template-columns]
HTML units: px, %, fr, em, etc.		 grid‑template: [header‑top] "a a a"     [header‑bottom]
                 [main‑top] "b b b" 1fr [main‑bottom]
                            / auto 1fr auto;
grid‑template: 200px 40% 150px / 1fr 5fr 2fr;		 Used to combine grid‑template‑areas, grid‑template‑columns, and grid‑template‑rows. A / must separate the grid‑template‑areas and grid‑template‑columns from the grid‑template‑rows values.

Spacing between grid elements

Property Value(s) Example Usage
row‑gap HTML units: px, %, fr, em, etc. row‑gap: 1em; Used to set spacing between rows in a grid.
column‑gap HTML units: px, %, fr, em, etc. column‑gap: 1em; Used to set spacing between columns in a grid.
gap [row‑gap] [column‑gap] gap: 1em 1em; Used to combine row‑gap and column‑gap into a shorthand. If only one value is present, it will set both row‑gap and column‑gap to the same value.

Defining element sizes

Grid lines are counted from the outside edge of the grid, starting at 1. Negative values will reverse the counting direction, starting from the final grid line and counting backwards. For example, grid‑row‑start: -3; would place the element starting at the third grid line from the end of the grid.

Use the span property to set an element to a certain number of units wide. Example: grid-row: 2 / span 3; will make an element start from the second gridline and span three rows or columns. This can help avoid off-by-one errors when trying to set grid element sizes by grid line numbers.

Property Value(s) Example Usage
grid‑row‑start or
grid‑column‑start		 integers grid‑row‑start: 3;
grid‑column‑start: 4;		 Specifices the number of the grid line that the element starts on.
grid‑row‑end or
grid‑column‑end		 integers grid‑row‑end: 7;
grid‑column‑end: 8;		 Specifices the number of the grid line that the element ends on.
grid‑row or
grid‑column		 [grid‑row‑start] / [grid‑row‑end]
[grid‑column‑start] / [grid‑column‑end]		 grid‑row: 3 / 7;
grid‑column: 4 / 8;		 Combines row/column specifications into a shorthand for each of them. There must always be two values, and they must always have a / between them.
grid‑area [grid‑row‑start] / [grid‑column‑start] / [grid‑row‑end] / [grid‑column‑end] grid‑area: 3 / 4 / 7 / 8; Combines row/column specifications into one unified shorthand. There must always be four values, and they must always have / between them.

Justify and align

justify-items

This positions grid items within their columns along the row axis, left-to-right across the webpage.

start

1
2
3

end

1
2
3

center

1
2
3

stretch (default)

1
2
3

justify-content

This positions a grid within its parent element along the row axis, left-to-right across the webpage.

justify-content: stretch; will only resize grid items in columns set to auto or a fr value. Explicit sizes such as %, em, and px will not resize to fill the grid’s parent container.

start (default)

1
2
3

end

1
2
3

center

1
2
3

stretch

1
2
3

space-around

1
2
3

space-between

1
2
3

space-evenly

1
2
3

align-items

This positions grid items within their rows along the column axis, top-to-bottom across the webpage.

start

1
2
3

end

1
2
3

center

1
2
3

stretch (default)

1
2
3

align-content

This positions a grid within its parent element along the column axis, top-to-bottom across the webpage.

align-content: stretch; will only resize grid items in columns set to auto or a fr value. Explicit sizes such as %, em, and px will not resize to fill the grid’s parent container.

start (default)

1
2
3
4
5
6

end

1
2
3
4
5
6

center

1
2
3
4
5
6

stretch

1
2
3
4
5
6

space-around

1
2
3
4
5
6

space-between

1
2
3
4
5
6

space-evenly

1
2
3
4
5
6

justify-self

This positions grid items within their grid section along the row axis, left-to-right across the webpage.

start

1
2
3

end

1
2
3

center

1
2
3

stretch (default)

1
2
3

align-self

This positions grid items within their grid section along the column axis, top-to-bottom across the webpage.

start

1
2
3

end

1
2
3

center

1
2
3

stretch (default)

1
2
3

Implicit grid

When the number of elements placed in a grid overflows outside of the explicity defined layout (X rows, Y columns), implicity grid allows the browser to add more rows to contain the additional content.

Default behavior:

  • Items will fill up rows first
  • New rows are added as necessary
  • New grid rows will only be tall enough to contain the new content

Auto-size rows and columns

To change the default behavior of the implicit grid, you can define grid-auto-rows and grid-auto-columns. To change the size of each auto row or column, just add a new size to the property’s value. New rows or columns will cycle through the sizes specified in grid-auto-rows and grid-auto-columns and repeat as needed.

The repeat function will duplicate specifications for rows or columns a given number of times. repeat(3, 100px) will create three 100px wide sections. repeat(2, 20px 50px); will create four columns (two sets of two) where the first and third columns are 20px wide, and the second and fourth columns are 50px wide.

Property Value(s) Example Usage
grid‑auto‑columns HTML units: px, %, fr, em, etc. grid-auto-rows: 200px 100px; Define column sizes sequentially; don’t separate with commas.
grid‑auto‑rows HTML units: px, %, fr, em, etc. grid-template-rows: 40%; Define row sizes sequentially; don’t separate with commas.

Auto flow

grid-auto-flow speficies whether new elements are added to rows or columns. row adds new elements to a new row, column adds new elements to a new column, and dense attempts to fill holes in the layout with smaller elements. row and column can both be paired with dense.

Example: grid-auto-flow: row dense;

Example

This CSS grid was created as a map for a paintball park; the previous version used divs, floats, and hard-coded sizes, which meant that it wasn’t responsive and didn’t work well on mobile. This newer version using CSS grid is much tidier, easier to maintain, and resizes to work well on smaller screens.

Von Zipper

Hyperball

Pipes

Bunker Hill

Speedball

.50cal

Urban

Tree

Bleachers

Nerf

Chrono

Parking Lot

Shed

Picnic Top

Pro shop

Picnic Bottom

Junkyard

Spools