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

Basic grid

This is the bare naked Flexbox grid. There is no fixed size of columns here, instead the number of columns is defined by the number and the size of the childs.

This looks similar to the basic CSS grid but is in fact different. The childs take all space available. See how the last container childs wrap on a next row when your browser window get’s smaller. Also note that the direct childs of the Flebox containers with gap need to be encapsulated.

Syntax: .flex.gap_s
SCSS: _flex.scss
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="flex gap_s">
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
  <div><div class="box text-clip text-mono">&nbsp;</div></div>
</div>