Encyclopedia / CSS

Layout (Flexbox & Grid)

How boxes are arranged on the page.

Flexbox handles one direction: a row of nav links or a column of cards. Grid handles two: page structure and card galleries. Between them, nearly any layout works without hacks.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

Related terms

CSS Responsive design

Where it shows up in a page load

  1. Step 9: Style, layout, paint. CSS is applied to the DOM. The browser works out where every box goes (layout) and draws the pixels (paint). The moment the largest piece of content appears is called LCP, and it's one of Google's Core Web Vitals.

Watch the full request journey →

More in CSS

How the document looks at every screen size.

CSS Responsive design Design tokens Web fonts

Open in the interactive encyclopedia →