Layout

Grid

Create minimal responsive layouts with .grid to enable auto-layout columns.

1
2
3
4
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Columns intentionally collapse on small devices (<768px).

.grid is not available in the class‑less version.

About CSS Grids#

As Pico focuses on native HTML elements, we kept this grid system minimalist.

A complete grid system in flexbox, with all the ordering, offsetting, and breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.

If you need a quick way to prototype or build a complex layout, you can look at Flexbox grid layouts—for example, Bootstrap Grid System or Flexbox Grid.

If you need a light and custom grid, you can look at CSS Grid Generators—for example, CSS Grid Generator, Layoutit!, or Griddy.

Alternatively, you can learn about CSS Grid.

Edit this page on GitHub