Foundation
Grid
Coding the Grid
The Prism grid system is built with flexbox, and works similarly to Bootstrap 4. The same utilities apply for containers, rows, and columns.
One of three columns
One of three columns
One of three columns
<>
<div className="container">
<div className="row">
<div className="col-sm">
One of three columns
</div>
<div className="col-sm">
One of three columns
</div>
<div className="col-sm">
One of three columns
</div>
</div>
</div>
</>
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div><div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Grid Options
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Equal Width
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<>
<div className="container">
{'
'}
<div className="row">
{'
'}
<div className="col bg-white">
1 of 2
</div>
{'
'}
<div className="col bg-primary">
2 of 2
</div>
{'
'}
</div>
{'
'}
<div className="row">
{'
'}
<div className="col bg-white">
1 of 3
</div>
{'
'}
<div className="col bg-primary">
2 of 3
</div>
{'
'}
<div className="col bg-white">
3 of 3
</div>
{'
'}
</div>
</div>
</>
<div class="container">
<div class="row">
<div class="col bg-white">
1 of 2
</div>
<div class="col bg-primary">
2 of 2
</div>
</div>
<div class="row">
<div class="col bg-white">
1 of 3
</div>
<div class="col bg-primary">
2 of 3
</div>
<div class="col bg-white">
3 of 3
</div>
</div>
</div>