Grid layout

A grid layout arranges content using a recurring structure of rows, columns and the gaps between them.

Browse more examples →
From the collection

What it means

A visible card grid is one use, but an invisible grid can also align headings, images and text across different sections. The underlying structure helps a varied page feel connected. It can be implemented in different ways; a visual grid does not establish that the site uses CSS Grid.

Use it in practice

Choose columns that fit the content and reduce them when space becomes limited. Align neighboring sections intentionally rather than forcing every element into an identical box.

Watch out for

Do not keep too many columns on a phone. Fixed-height cells can truncate useful text or create unnecessary gaps.