Spans
←Grid is even more fun when working with span classes. With a 12 columns grid, a .span-6
will use half of the width of a row, while .span-4
will use a third and .span-12
will cover the whole row.
Syntax:
.span-{size}
SCSS:
_grid-spans.scss
span-2
span-2
span-2
span-2
span-2
span-2
span-3
span-3
span-3
span-3
span-4
span-4
span-4
span-6
span-6
span-12
span-8
span-4
span-6
span-3
span-3
<div class="grid gap_s">
<div class="box text-clip text-mono bg-b span-2">span-2</div>
<div class="box text-clip text-mono bg-c span-2">span-2</div>
<div class="box text-clip text-mono bg-d span-2">span-2</div>
<div class="box text-clip text-mono bg-e span-2">span-2</div>
<div class="box text-clip text-mono bg-f span-2">span-2</div>
<div class="box text-clip text-mono bg-g span-2">span-2</div>
<div class="box text-clip text-mono bg-h span-3">span-3</div>
<div class="box text-clip text-mono bg-i span-3">span-3</div>
<div class="box text-clip text-mono bg-j span-3">span-3</div>
<div class="box text-clip text-mono bg-k span-3">span-3</div>
<div class="box text-clip text-mono bg-l span-4">span-4</div>
<div class="box text-clip text-mono bg-m span-4">span-4</div>
<div class="box text-clip text-mono bg-n span-4">span-4</div>
<div class="box text-clip text-mono bg-o span-6">span-6</div>
<div class="box text-clip text-mono bg-p span-6">span-6</div>
<div class="box text-clip text-mono bg-q span-12">span-12</div>
<div class="box text-clip text-mono bg-r span-8">span-8</div>
<div class="box text-clip text-mono bg-s span-4">span-4</div>
<div class="box text-clip text-mono bg-t span-6">span-6</div>
<div class="box text-clip text-mono bg-u span-3">span-3</div>
<div class="box text-clip text-mono bg-v span-3">span-3</div>
</div>