CSS layout guide

A little structure.
A lot of possibility.

Use CSS Grid to turn a collection of elements into a clear, flexible layout.

Layout notes·Practical CSS

01 / Editorial

02 / Gallery

03 / Workspace

04 / Collection

05 / Dashboard

06 / Portfolio

Start with three columns

Define the tracks, then give the content room to breathe.

.collection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Try it

Change the number of columns and watch the same content settle into a new arrangement.