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
Section titled “Create a row”Use these utility classes to make a container a row that will be full of columns.
ClassValueCopy
.row<div class=“row”></div>
12-column grid
Section titled “12-column grid”The grid is based on a 12-columnn matrix. Columns are named depending on their column span.
ClassValueCol widthCopy
.col-10<div class=“col-10”></div>83.33%.col-9<div class=“col-9”></div>75%.col-8<div class=“col-8”></div>66.67%.col-6<div class=“col-6”></div>50%.col-4<div class=“col-4”></div>33.33%.col-3<div class=“col-3”></div>25%.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
Section titled “Breakpoint infixes”Add the viewport sizing infixes (sm, md, lg, xl, xxl) to apply column widths at certain breakpoints.
| XS | Small | Medium | Large | XL | XXL | Copy | |
|---|---|---|---|---|---|---|---|
.col- | Column | Column | Column | Column | Column | Column | |
.col-sm- | No column | Column | Column | Column | Column | Column | |
.col-m- | No column | No column | Column | Column | Column | Column | |
.col-lg- | No column | No column | No column | Column | Column | Column | |
.col-xl- | No column | No column | No column | No column | Column | Column | |
.col-xxl- | No column | No column | No column | No column | No column | Column |
Equal-width
Section titled “Equal-width”Use unit-less .col elements to quickly create equal width columns.
Responsive
Section titled “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).
<div class="row"> <div class="col-md">…</div> <div class="col-md">…</div> <div class="col-md">…</div></div>Gutters
Section titled “Gutters”Gutters are the gaps between column content and can be set horizontally (default), but also vertically.
/* 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>