OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Spans

A simple application of the flexbox CSS grid system is to stack fixed sized layout modules.

There is no number of fixed columns here. So the Flexbox span classes are based on fractions like span-half instead of span-6.

 
span-fifth
 
span-fifth
 
span-fifth
 
span-fifth
 
span-fifth
 
span-quarter
 
span-quarter
 
span-quarter
 
span-quarter
 
span-third
 
span-third
 
span-third
 
span-half
 
span-half
 
span-full
 
span-twothird
 
span-third
 
span-half
 
span-quarter
 
span-quarter
<div class="flex gap_s">
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-b">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-c">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-d">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-e">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-fifth">
    <div class="box text-clip text-mono bg-f">
      &nbsp;
      <div class="mini-info">span-fifth</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-g">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-h">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-i">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-j">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-k">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-l">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-m">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-half">
    <div class="box text-clip text-mono bg-n">
      &nbsp;
      <div class="mini-info">span-half</div>
    </div>
  </div>
  <div class="span-half">
    <div class="box text-clip text-mono bg-o">
      &nbsp;
      <div class="mini-info">span-half</div>
    </div>
  </div>
  <div class="span-full">
    <div class="box text-clip text-mono bg-p">
      &nbsp;
      <div class="mini-info">span-full</div>
    </div>
  </div>
  <div class="span-twothird">
    <div class="box text-clip text-mono bg-q">
      &nbsp;
      <div class="mini-info">span-twothird</div>
    </div>
  </div>
  <div class="span-third">
    <div class="box text-clip text-mono bg-r">
      &nbsp;
      <div class="mini-info">span-third</div>
    </div>
  </div>
  <div class="span-half">
    <div class="box text-clip text-mono bg-s">
      &nbsp;
      <div class="mini-info">span-half</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-t">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
  <div class="span-quarter">
    <div class="box text-clip text-mono bg-u">
      &nbsp;
      <div class="mini-info">span-quarter</div>
    </div>
  </div>
</div>