Grid by Example

Everything you need to learn CSS Grid Layout

Percentage based grids and gaps

A grid with a width of 90%. Six column tracks of 10% each, 5 gutter tracks of 2% each.

The grid-gap property controls columns and rows but as the grid has no height, the row gap resolves to 0.

If we give the grid a height, there is something for 2% to be a percentage of. So we get a gap.

Read the specification | View example as full page

See the Pen Grid by Example 36: Percentage grids and gaps by rachelandrew (@rachelandrew) on CodePen.