Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Aligning the grid with space-around and space-between

In this example I am creating a four column track grid, the tracks have absolute sizes and in total are smaller than the area of the grid container. This time I have used:

This means that extra space is distributed around the tracks and our desired 10 pixel gutter gets more space. However so do any areas which span more than one track as where they cross a gutter they gain this extra space too.

Read the specification | View example as full page

See the Pen Grid by Example 33: fixed sizes can get extra space due to alignment properties by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples