Grid

.grid enable a minimal grid system with 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 collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

 More about grids

As Pico focuses on native HTML elements, we kept this grid system very 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 prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only 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.