Skip to content
Design System

Flex Grid System

Our grid system is forked from Bootstrap 5.2’s grid sytem. Please refer to the docs for complete documentation, but we’ll cover the core features here.

Create a row

Use these utility classes to make a container a row that will be full of columns.

ClassValueCopy

  1. .row
    <div class=“row”></div>

12-column grid

The grid is based on a 12-columnn matrix. Columns are named depending on their column span.

col-6
col-6
col-10
col-2
col-9
col-3
col-8
col-4
col-4
col-4
col-4
col-3
col-3
col-3
col-3

ClassValueCol widthCopy

  1. .col-10
    <div class=“col-10”></div>
    83.33%
  2. .col-9
    <div class=“col-9”></div>
    75%
  3. .col-8
    <div class=“col-8”></div>
    66.67%
  4. .col-6
    <div class=“col-6”></div>
    50%
  5. .col-4
    <div class=“col-4”></div>
    33.33%
  6. .col-3
    <div class=“col-3”></div>
    25%
  7. .col-2
    <div class=“col-2”></div>
    16.67%

.col-11, .col-7, .col-5 and .col-1 are possible calculations but are very rarely used.

Breakpoint infixes

Add the viewport sizing infixes (sm, md, lg, xl, xxl) to apply column widths at certain breakpoints.

XSSmallMediumLargeXLXXLCopy
.col-ColumnColumnColumnColumnColumnColumn
.col-sm-No columnColumnColumnColumnColumnColumn
.col-m-No columnNo columnColumnColumnColumnColumn
.col-lg-No columnNo columnNo columnColumnColumnColumn
.col-xl-No columnNo columnNo columnNo columnColumnColumn
.col-xxl-No columnNo columnNo columnNo columnNo columnColumn

Equal-width

Use unit-less .col elements to quickly create equal width columns.

col
col
col
col
col
col
col
col
col

Responsive

Using responsive infixes to create a grid that only creates columns at certain breakpoints In the following example, .col-md will stack until the medium viewport breakpoint is reached (drag the preview box below to resize and see this in effect).

col
col
col
<div class="row">
  <div class="col-md">…</div>
  <div class="col-md">…</div>
  <div class="col-md">…</div>
</div>

Gutters

Gutters are the gaps between column content and can be set horizontally (default), but also vertically.

col
col
col
col
col
col-3
col-6
col-3
/* sets the gutters to zero */
<div class="row g-0">
  <div class="col">…</div>
  <div class="col">…</div>
  <div class="col">…</div>
</div>

Possible gutter values follow the utility spacing scale, meaning you can set gutters from zero/0 (.g-0) to 10/2.5rem (.g-10).

To set horizontally and vertically set gutters indepedently of one another, use gx-* and gy-* classes.

Example:

<div class="row gx-6 gy-8">…</div>