Grid

The Grid system provides a flexible way to create both column-based and row-based layouts. It supports various column counts, column spans, and responsive behaviors to create complex layouts easily.

Ways to Define the Grid

The grid system provides two ways to define column layouts:

  • Column Count: Set grid--cols-{number} on the parent to create equal-width columns
  • Column Spans: Set col--span-{number} on individual columns to control their width

Column Count

Use grid--cols-{number} to specify any number of columns. Here are examples with 4 and 3 columns:

1/4
1/4
1/4
1/4
1/3
1/3
1/3
Grid Column Count 
<div class="grid grid--cols-4">
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
  <div>1/4</div>
</div>

<div class="grid grid--cols-3">
  <div>1/3</div>
  <div>1/3</div>
  <div>1/3</div>
</div>

Column Spans

Use col--span-{number} to make a column span multiple grid columns. In a grid row, the sum of all column spans should equal the total number of grid columns. For example, you might have spans of 1 and 2, or spans of 3, 6, and 2.

Span 1
Span 2
Span 3
Span 6
Span 2
Grid Column Spans 
<div class="grid">
  <div class="col--span-1">Span 1</div>
  <div class="col--span-2">Span 2</div>
</div>

<div class="grid">
  <div class="col--span-3">Span 3</div>
  <div class="col--span-6">Span 6</div>
  <div class="col--span-2">Span 2</div>
</div>

Column Layouts

Use columns to create vertical layouts within the grid. Columns can be positioned and aligned using modifier classes.

Basic Column Layout

Use the col class to create vertical layouts.

1
2
3
4
Grid Column Layout 
<div class="grid">
  <div class="col">
    {{ Item }}
    {{ Item }}
    {{ Item }}
    {{ Item }}
  </div>
</div>

Column Positioning

Use col--{position} where position can be start, center, or end to control vertical alignment:

Start
Center
End
Grid Column Positioning 
<div class="grid grid--cols-3">
  <div class="col col--start">
    {{ Item }}
  </div>
  <div class="col col--center">
    {{ Item }}
  </div>
  <div class="col col--end">
    {{ Item }}
  </div>
</div>

Row Layouts

Use rows to create horizontal layouts within the grid. Rows can be positioned and aligned using modifier classes.

Basic Row Layout

Use the row class to create horizontal layouts.

1
2
3
4
Grid Row Layout 
<div class="grid">
  <div class="row">
    {{ Item }}
    {{ Item }}
    {{ Item }}
    {{ Item }}
  </div>
</div>

Row Positioning

Use row--{position} where position can be start, center, or end to control horizontal alignment:

Start
Center
End
Grid Row Positioning 
<div class="grid grid--cols-1">
  <div class="row row--start">
    {{ Item }}
  </div>
  <div class="row row--center">
    {{ Item }}
  </div>
  <div class="row row--end">
    {{ Item }}
  </div>
</div>