Table grid
←Don’t feel cheap. CSS table layout is back!
The grid needs to have an actual height, otherwise the effect is barely visible. In this example I have cheated by filling up the empty cells with boxes.
SCSS:
_grid-spans.scss
start-1 end-3 start-y-1 end-y-5
start-3 end-5 start-y-1 end-y-5
start-2 end-9 start-y-5 end-y-7
start-6 end-13 start-y-1 end-y-4
<div class="grid gap_s">
<div class="box text-clip text-mono bg-b start-1 end-3 start-y-1 end-y-5">start-1 end-3 start-y-1 end-y-5</div>
<div class="box text-clip text-mono bg-c start-3 end-5 start-y-1 end-y-5">start-3 end-5 start-y-1 end-y-5</div>
<div class="box text-clip text-mono bg-d start-2 end-9 start-y-5 end-y-7">start-2 end-9 start-y-5 end-y-7</div>
<div class="box text-clip text-mono bg-e start-6 end-13 start-y-1 end-y-4">start-6 end-13 start-y-1 end-y-4</div>
<div class="box text-clip text-mono bg-f"> </div>
<div class="box text-clip text-mono bg-g"> </div>
<div class="box text-clip text-mono bg-h"> </div>
<div class="box text-clip text-mono bg-i"> </div>
<div class="box text-clip text-mono bg-j"> </div>
<div class="box text-clip text-mono bg-k"> </div>
<div class="box text-clip text-mono bg-l"> </div>
<div class="box text-clip text-mono bg-m"> </div>
<div class="box text-clip text-mono bg-n"> </div>
<div class="box text-clip text-mono bg-o"> </div>
<div class="box text-clip text-mono bg-p"> </div>
<div class="box text-clip text-mono bg-q"> </div>
<div class="box text-clip text-mono bg-r"> </div>
<div class="box text-clip text-mono bg-s"> </div>
<div class="box text-clip text-mono bg-t"> </div>
<div class="box text-clip text-mono bg-u"> </div>
<div class="box text-clip text-mono bg-v"> </div>
<div class="box text-clip text-mono bg-w"> </div>
<div class="box text-clip text-mono bg-x"> </div>
<div class="box text-clip text-mono bg-y"> </div>
<div class="box text-clip text-mono bg-z"> </div>
</div>