Breakpoints
←With these media query helper classes you can make your containers span over less columns on smaller viewports. Make your browser windows smaller to see how the grid reflows on tablet and phone.
Classes with the breakpoint -t will realign on tablet-like screen resolution size, -p will do so on phone screen size. The example below will have three rows on desktop screens.
Syntax:
.span-{columns}-{breakpoint}
SCSS:
_grid-breakpoints.scss
span-2 span-4-t span-6-p
span-2 span-4-t span-6-p
span-2 span-4-t span-6-p
span-2 span-4-t span-6-p
span-2 span-4-t span-6-p
span-2 span-4-t span-6-p
span-3 span-6-t span-12-p
span-3 span-6-t span-12-p
span-3 span-6-t span-12-p
span-3 span-6-t span-12-p
↑
2 rows on desktop
4 rows on tablet
7 rows on phone
<div class="grid gap-no ma-b_s text-mono text_s">
<div class="box text-clip bg-b span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
<div class="box text-clip bg-c span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
<div class="box text-clip bg-d span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
<div class="box text-clip bg-e span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
<div class="box text-clip bg-f span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
<div class="box text-clip bg-g span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
<div class="box text-clip bg-h span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
<div class="box text-clip bg-i span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
<div class="box text-clip bg-j span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
<div class="box text-clip bg-k span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
</div>
<p>
↑<br>
2 rows on desktop<br>
4 rows on tablet<br>
7 rows on phone
</p>