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

Gaps

Use gutter classes from .gap_xs to .gap_xl to control the space between the objects.

There is no flex-gap property (yet?), so the gutters are based on a negative margin on the grid container and paddings for it’s direct child elements. Direct childs need to be nested one level. The benefit: In contrast to CSS Grid gaps, even large gaps are no problem. Downsides: There is no gap-default here, so you’ll need to set one. Margin-collapsing might appear in certain situations.

Extra small gap .flex.gap_xs

 
 
 
 
 
 
 
 

Small gap .flex.gap_s

 
 
 
 
 
 
 
 

Medium gap .flex.gap_m

 
 
 
 
 
 
 
 

Large gap .flex.gap_l

 
 
 
 
 
 
 
 
<h4 class="flex wrap-no">
  <span>Extra small gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_xs</span>
</h4>
<div class="flex ma-t_s gap_xs">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
  <span>Small gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_s</span>
</h4>
<div class="flex ma-t_s gap_s">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
  <span>Medium gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_m</span>
</h4>
<div class="flex ma-t_s gap_m">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
  <span>Large gap</span>
  <span class="span-auto text-thin text-mono">.flex.gap_l</span>
</h4>
<div class="flex ma-t_s gap_l">
  <div class="span-fifth"><div class="box text-clip text-mono bg-b">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-c">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-d">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-e">&nbsp;</div></div>
  <div class="span-fifth"><div class="box text-clip text-mono bg-f">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-g">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-h">&nbsp;</div></div>
  <div class="span-third"><div class="box text-clip text-mono bg-i">&nbsp;</div></div>
</div>