Page layout: container and grid

Layout means the large parts of a page and how they are arranged: the header, the main content, the footer, columns. Pico offers just three classes for it: container, container-fluid and grid.

Header, content, footer

A page is built from the semantic tags <header>, <main> and <footer> directly inside <body>. The container class limits the width of each part and centers it:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<header class="container">
  <h1>Anna's blog</h1>
</header>
<main class="container">
  <p>Blog posts and projects will go here.</p>
</main>
<footer class="container">
  <small>© 2025 Anna Petrova</small>
</footer>

The three parts line up on the same left edge and get vertical spacing. Pico adds top and bottom padding to body > header, body > main and body > footer, which is why they must sit directly in <body>.

A full-width container

Class	Width
`container`	Grows in steps up to about 1450 pixels and is centered
`container-fluid`	Always the full window width, with side padding

A fixed container suits text: long lines on a wide monitor are hard to read. container-fluid suits dashboards and galleries. The classless build needs neither class — Pico limits the width itself.

A column grid

The grid class lays out its direct children in equal-width columns. As many children, as many columns:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div class="grid">
  <div>
    <h4>Layout</h4>
    <p>Responsive pages from a mockup.</p>
  </div>
  <div>
    <h4>Blog</h4>
    <p>Weekly notes on CSS.</p>
  </div>
  <div>
    <h4>Consulting</h4>
    <p>A one-hour review of your site.</p>
  </div>
</div>

On screens wider than 768 pixels the blocks form three columns; on narrow ones they stack. The preview window on the lesson page may be narrower than 768 pixels — then the columns stack; in your own index.html on a wide screen they line up in a row.

What Pico's grid lacks

The grid is simple on purpose: no classes for column width, order or breakpoints. If you need a column twice as wide as its neighbor, add your own rule:

.grid.with-sidebar {
  grid-template-columns: 2fr 1fr;
}

Put it in your own stylesheet linked after Pico and give the block class="grid with-sidebar". Keep in mind this rule works at any width — on phones it is worth wrapping it in a media query.

Common mistake

Putting <main class="container"> inside an extra <div>. Pico's spacing targets the body > main selector, so a nested <main> sticks to the header with no vertical padding. Keep the header, content and footer as direct children of <body>.

Thanks for reading!