Boilerplate provides a twelve column grid utility with responsive gaps. This replaces candlepin or using display: flex throughout the library.
| Width | Gaps |
|---|---|
| 0 - 624px | 16px |
| 625 - 1120px | 32px |
| 1121 - 1392px | 48px |
| 1393px - | 48px |
There’s two named areas and one named line:
wide is a grid area that spans the entire width of the window.main is the main content grid area. In the last version of boilerplate, this would have been the width of content within the .container element.center for convienence. For the default grid, this is equivalent to 8.Under the hood, the grid is implemented as a 14 column grid where the outer two columns are used to ensure outer gutters.
<div class=" grid">
<div style="background: #0f02; grid-column: 2">2</div>
<div style="background: #0f02; grid-column: 3">3</div>
<div style="background: #0f02; grid-column: 4">4</div>
<div style="background: #0f02; grid-column: 5">5</div>
<div style="background: #0f02; grid-column: 6">6</div>
<div style="background: #0f02; grid-column: 7">7</div>
<div style="background: #0f02; grid-column: 8">8</div>
<div style="background: #0f02; grid-column: 9">9</div>
<div style="background: #0f02; grid-column: 10">10</div>
<div style="background: #0f02; grid-column: 11">11</div>
<div style="background: #0f02; grid-column: 12">12</div>
<div style="background: #0f02; grid-column: 13">13</div>
<div style="background: #0f02; grid-column: 2 / 4">2 / 4</div>
<div style="background: #0f02; grid-column: 4 / 6">4 / 6</div>
<div style="background: #0f02; grid-column: 6 / 8">6 / 8</div>
<div style="background: #0f02; grid-column: 8 / 10">8 / 10</div>
<div style="background: #0f02; grid-column: 10 / 12">10 / 12</div>
<div style="background: #0f02; grid-column: 12 / 14">12 / 14</div>
<div style="background: #0f02; grid-column: 2 / 5">2 / 5</div>
<div style="background: #0f02; grid-column: 5 / 8">5 / 8</div>
<div style="background: #0f02; grid-column: 8 / 11">8 / 11</div>
<div style="background: #0f02; grid-column: 11 / 14">11 / 14</div>
<div style="background: #0f02; grid-column: 2 / 6">2 / 6</div>
<div style="background: #0f02; grid-column: 6 / 10">6 / 10</div>
<div style="background: #0f02; grid-column: 10 / 14">10 / 14</div>
<div style="background: #0f02; grid-column: 2 / 8">2 / 8</div>
<div style="background: #0f02; grid-column: 8 / 14">8 / 14</div>
</div>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
.grid {
@include grid;
}