Grid System

The grid system is built on top of the flexbox architecture, providing full access to its utilities—such as justify-content, align-items, and spacing—applied to individual columns or column groups.

Setting up

Use the columns class to create a columns container. Use the columns-X class to define the width of individual columns or entire groups of columns.

<div class="columns">
  <div class="md:columns-4 bg-neutral-100 p-xs">One of 3 columns</div>
  <div class="md:columns-4 bg-neutral-100 p-xs">One of 3 columns</div>
  <div class="md:columns-4 bg-neutral-100 p-xs">One of 3 columns</div>
</div>

<!-- Or use the shorthand `columns md:columns-4` -->

<div class="columns md:columns-4">
  <div class="bg-neutral-100 p-xs">One of 3 columns</div>
  <div class="bg-neutral-100 p-xs">One of 3 columns</div>
  <div class="bg-neutral-100 p-xs">One of 3 columns</div>
</div>

Horizontal alignment

Change the horizontal alignment with any of the responsive justify-* classes.

<div class="columns md:columns-5 justify-between">
  <div class="bg-neutral-100 p-xs">One of 2 columns</div>
  <div class="bg-neutral-100 p-xs">One of 2 columns</div>
</div>

Vertical alignment

Change the vertical alignment with any of the responsive items-* classes.

<div class="columns md:columns-6 items-center aspect-ultrawide">
  <div class="bg-neutral-100 p-xs">One of 2 columns</div>
  <div class="bg-neutral-100 p-xs">One of 2 columns</div>
</div>

Or, change the alignment of each column individually with any of the responsive .self-* classes.

<div class="columns md:columns-4 aspect-ultrawide">
  <div class="bg-neutral-100 p-xs self-start">One of 3 columns</div>
  <div class="bg-neutral-100 p-xs self-center">One of 3 columns</div>
  <div class="bg-neutral-100 p-xs self-end">One of 3 columns</div>
</div>

Wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Reordering

Use .order-* classes for controlling the visual order of your content.

<div class="columns md:columns-6">
  <div class="bg-neutral-100 p-xs order-last">1.
First in DOM, last visually.</div>
  <div class="bg-neutral-100 p-xs">2.
One of 3 columns</div>
  <div class="bg-neutral-100 p-xs">3.
One of 3 columns</div>
</div>

Gutters

Gutters are the gaps between column content.

Use .--column-gap-* and .--row-gap-* classes to control the x and y gutter size.

<div class="columns md:columns-6 --column-gap-2xs --row-gap-2xs">
  <div class="bg-neutral-100 p-xs">One of 4 columns</div>
  <div class="bg-neutral-100 p-xs">One of 4 columns</div>
  <div class="bg-neutral-100 p-xs">One of 4 columns</div>
  <div class="bg-neutral-100 p-xs">One of 4 columns</div>
</div>

Offsetting columns

Move columns to the right using .ml-* classes. These classes increase the left margin of a column by * columns or by auto.

<div class="columns md:columns-5">
  <div class="bg-neutral-100 p-xs">One of 2 columns</div>
  <div class="bg-neutral-100 p-xs ml-auto">One of 2 columns</div>
</div>