CSS Website Layout

Modern page layout is usually built with CSS Grid for the large page structure and Flexbox for one-dimensional alignment inside components.

Page structure

A common page has a header, navigation, main content, sidebar and footer. HTML describes those regions; CSS decides how they are arranged.

<body>
  <header>Site header</header>
  <main class="layout">
    <article>Main article</article>
    <aside>Related links</aside>
  </main>
  <footer>Footer</footer>
</body>

Grid for the main layout

CSS Grid is a good fit when you need rows and columns.

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 1.5rem;
}

Result:

Article

Flexbox for component layout

Flexbox is usually simpler for nav bars, toolbars and rows of controls.

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Responsive layout

@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; }
}

Where float still fits

float is mainly a legacy layout technique today. It can still be useful for wrapping text around an image, but it should not be the main tool for page layout.