Layout

Container

Use .container for a centered viewport or .container-fluid for a full-width layout.

Pico includes six default breakpoints. These breakpoints can be customized with Sass.

.container and .container-fluid are not available in the class‑less version (see Semantic containers for an alternative).

Fixed width#

.container provides a centered container with a fixed width.

<body>
  <main class="container">
    ...
  </main>
</body>

.container-fluid provides a full-width container.

<body>
  <main class="container-fluid">
    ...
  </main>
</body>

In the classless version, <header>, <main>, and <footer> inside <body> act as containers to define a centered or a fluid viewport.