Teutonic CSS

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-3

span-4

span-6

span-12

span-8

span-4

span-6

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>