Teutonic CSS

Offset grid

←

As an alternative to the floating spans, you can also define the start and end point of grid items. Mind that this grid has 11 gaps (gutters in between), 12 columns (content areas) and 13 tracks (points to start and end columns).

SCSS: _grid-spans.scss

start-1 end-2

start-2 end-6

start-6 end-12

start-1 end-3

start-5 end-8

start-1 end-4

start-6 end-10

start-4 end-8

start-8 end-13

<div class="grid gap_s">
  <div class="box text-clip text-mono bg-b start-1 end-2">start-1 end-2</div>
  <div class="box text-clip text-mono bg-c start-2 end-6">start-2 end-6</div>
  <div class="box text-clip text-mono bg-d start-6 end-12">start-6 end-12</div>
  <div class="box text-clip text-mono bg-e start-1 end-3">start-1 end-3</div>
  <div class="box text-clip text-mono bg-f start-5 end-8">start-5 end-8</div>
  <div class="box text-clip text-mono bg-g start-1 end-4">start-1 end-4</div>
  <div class="box text-clip text-mono bg-h start-6 end-10">start-6 end-10</div>
  <div class="box text-clip text-mono bg-i start-4 end-8">start-4 end-8</div>
  <div class="box text-clip text-mono bg-j start-8 end-13">start-8 end-13</div>
</div>