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

Automatic grid

←

This is the hip grid! It uses min-max for a fancy flexible layout and is defined bottom-up. Instead of a fixed number of columns, the content defines the grid look, by the minium and the maximum size of the childs and the number childs. It’s almost like a container query. Make your browser window smaller to see how it will add lines and wrap across them fluidly without breakpoints or media-queries.

The optional different min-size classes, .min_m — .min_xl are presets for minimum child size. When no class is given, the default min-width is 8rem. The default maximun width of each container is 1fr: When only one container is given, it will span across the whole row. There are no presets for the max size, but you can run your own by defining the local CSS vars. You can further customize the grid with the spans, breakpoints and gaps.

Syntax: .grid-auto(.min_{size})
SCSS: _grid-auto.scss

Automatic grid with 16 items

Here, with many items the minium size is clearly visible.

No min size .grid-auto

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.
Alea iacta est.
Aliquis in omnibus est nullus in singulis.
Ancipiti plus ferit ense gula
Arcem ex cloacâ facĕre.
Ave Caesar, morituri te salutant.
Beati pauperes spiritu
Carpe diem.
Carpe noctem.
Carthago delenda est.
Ductus exemplo.
Dum spiro spero
Eheu fugaces labuntur anni.
Forest fortuna adiuvat.

Medium min size .grid-auto.min_m

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.
Alea iacta est.
Aliquis in omnibus est nullus in singulis.
Ancipiti plus ferit ense gula
Arcem ex cloacâ facĕre.
Ave Caesar, morituri te salutant.
Beati pauperes spiritu
Carpe diem.
Carpe noctem.
Carthago delenda est.
Ductus exemplo.
Dum spiro spero
Eheu fugaces labuntur anni.
Forest fortuna adiuvat.

Large min size .grid-auto.min_l

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.
Alea iacta est.
Aliquis in omnibus est nullus in singulis.
Ancipiti plus ferit ense gula
Arcem ex cloacâ facĕre.
Ave Caesar, morituri te salutant.
Beati pauperes spiritu
Carpe diem.
Carpe noctem.
Carthago delenda est.
Ductus exemplo.
Dum spiro spero
Eheu fugaces labuntur anni.
Forest fortuna adiuvat.

Extra large min size .grid-auto.min_xl

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.
Alea iacta est.
Aliquis in omnibus est nullus in singulis.
Ancipiti plus ferit ense gula
Arcem ex cloacâ facĕre.
Ave Caesar, morituri te salutant.
Beati pauperes spiritu
Carpe diem.
Carpe noctem.
Carthago delenda est.
Ductus exemplo.
Dum spiro spero
Eheu fugaces labuntur anni.
Forest fortuna adiuvat.

Automatic grid with 3 items

This is the same markup as above, only with less items in each grid row. On all large screen viewport the next four rows look the same. Resize your browser to see differences.

No min size .grid-auto

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.

Medium min size .grid-auto.min_m

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.

Large min size .grid-auto.min_l

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.

Extra large min size .grid-auto.min_xl

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.

Spans and gaps

Add gap-classses, or gap-no to the auto-grid, span-classes on the child elements work as well.

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.
Alea iacta est.
Aliquis in omnibus est nullus in singulis.
Ancipiti plus ferit ense gula
Arcem ex cloacâ facĕre.
Ave Caesar, morituri te salutant.
Beati pauperes spiritu
Carpe diem.
Carpe noctem.
Carthago delenda est.
Ductus exemplo.
Dum spiro spero

Custom automatic grid

Last not least — you can change the min and max values of the childs using CSS Vars. Match the grid specs to your content. Check out the profile cards example to see this in action.

Ad praesens ova cras pullis sunt meliora
Aequam memento rebus in arduis servare mentem
Aere perennius.
Alea iacta est.
Aliquis in omnibus est nullus in singulis.
Ancipiti plus ferit ense gula
Arcem ex cloacâ facĕre.
Ave Caesar, morituri te salutant.
Beati pauperes spiritu
Carpe diem.
Carpe noctem.
Carthago delenda est.
<h3 id="grid-auto-16">
  Automatic grid with 16 items
</h3>
<p class="text_l read_xl ma-t_s">
  Here, with many items the minium size is clearly visible.
</p>
<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>No min size</span>
  <code class="span-auto">.grid-auto</code>
</h4>
<div class="grid-auto  text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
  <div class="box text-hyphen bg-e">Alea iacta est.</div>
  <div class="box text-hyphen bg-f">Aliquis in omnibus est nullus in singulis.</div>
  <div class="box text-hyphen bg-g">Ancipiti plus ferit ense gula</div>
  <div class="box text-hyphen bg-h">Arcem ex cloacâ facĕre.</div>
  <div class="box text-hyphen bg-i">Ave Caesar, morituri te salutant.</div>
  <div class="box text-hyphen bg-j">Beati pauperes spiritu</div>
  <div class="box text-hyphen bg-k">Carpe diem.</div>
  <div class="box text-hyphen bg-l">Carpe noctem.</div>
  <div class="box text-hyphen bg-m">Carthago delenda est.</div>
  <div class="box text-hyphen bg-n">Ductus exemplo.</div>
  <div class="box text-hyphen bg-o">Dum spiro spero</div>
  <div class="box text-hyphen bg-p">Eheu fugaces labuntur anni.</div>
  <div class="box text-hyphen bg-q">Forest fortuna adiuvat.</div>
</div>

<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>Medium min size</span>
  <code class="span-auto">.grid-auto.min_m</code>
</h4>
<div class="grid-auto min_m text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
  <div class="box text-hyphen bg-e">Alea iacta est.</div>
  <div class="box text-hyphen bg-f">Aliquis in omnibus est nullus in singulis.</div>
  <div class="box text-hyphen bg-g">Ancipiti plus ferit ense gula</div>
  <div class="box text-hyphen bg-h">Arcem ex cloacâ facĕre.</div>
  <div class="box text-hyphen bg-i">Ave Caesar, morituri te salutant.</div>
  <div class="box text-hyphen bg-j">Beati pauperes spiritu</div>
  <div class="box text-hyphen bg-k">Carpe diem.</div>
  <div class="box text-hyphen bg-l">Carpe noctem.</div>
  <div class="box text-hyphen bg-m">Carthago delenda est.</div>
  <div class="box text-hyphen bg-n">Ductus exemplo.</div>
  <div class="box text-hyphen bg-o">Dum spiro spero</div>
  <div class="box text-hyphen bg-p">Eheu fugaces labuntur anni.</div>
  <div class="box text-hyphen bg-q">Forest fortuna adiuvat.</div>
</div>

<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>Large min size</span>
  <code class="span-auto">.grid-auto.min_l</code>
</h4>
<div class="grid-auto min_l text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
  <div class="box text-hyphen bg-e">Alea iacta est.</div>
  <div class="box text-hyphen bg-f">Aliquis in omnibus est nullus in singulis.</div>
  <div class="box text-hyphen bg-g">Ancipiti plus ferit ense gula</div>
  <div class="box text-hyphen bg-h">Arcem ex cloacâ facĕre.</div>
  <div class="box text-hyphen bg-i">Ave Caesar, morituri te salutant.</div>
  <div class="box text-hyphen bg-j">Beati pauperes spiritu</div>
  <div class="box text-hyphen bg-k">Carpe diem.</div>
  <div class="box text-hyphen bg-l">Carpe noctem.</div>
  <div class="box text-hyphen bg-m">Carthago delenda est.</div>
  <div class="box text-hyphen bg-n">Ductus exemplo.</div>
  <div class="box text-hyphen bg-o">Dum spiro spero</div>
  <div class="box text-hyphen bg-p">Eheu fugaces labuntur anni.</div>
  <div class="box text-hyphen bg-q">Forest fortuna adiuvat.</div>
</div>

<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>Extra large min size</span>
  <code class="span-auto">.grid-auto.min_xl</code>
</h4>
<div class="grid-auto min_xl text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
  <div class="box text-hyphen bg-e">Alea iacta est.</div>
  <div class="box text-hyphen bg-f">Aliquis in omnibus est nullus in singulis.</div>
  <div class="box text-hyphen bg-g">Ancipiti plus ferit ense gula</div>
  <div class="box text-hyphen bg-h">Arcem ex cloacâ facĕre.</div>
  <div class="box text-hyphen bg-i">Ave Caesar, morituri te salutant.</div>
  <div class="box text-hyphen bg-j">Beati pauperes spiritu</div>
  <div class="box text-hyphen bg-k">Carpe diem.</div>
  <div class="box text-hyphen bg-l">Carpe noctem.</div>
  <div class="box text-hyphen bg-m">Carthago delenda est.</div>
  <div class="box text-hyphen bg-n">Ductus exemplo.</div>
  <div class="box text-hyphen bg-o">Dum spiro spero</div>
  <div class="box text-hyphen bg-p">Eheu fugaces labuntur anni.</div>
  <div class="box text-hyphen bg-q">Forest fortuna adiuvat.</div>
</div>
<h3 class="ma-t_xl ma-b_s" id="grid-auto-3">
  Automatic grid with 3 items
</h3>
<p class="text_l read_xl ma-t_s">
  This is the same markup as above, only with less items in each grid row. On all large screen viewport the next four rows look the same. Resize your browser to see differences.
</p>


<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>No min size</span>
  <code class="span-auto">.grid-auto</code>
</h4>
<div class="grid-auto  text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
</div>

<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>Medium min size</span>
  <code class="span-auto">.grid-auto.min_m</code>
</h4>
<div class="grid-auto min_m text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
</div>

<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>Large min size</span>
  <code class="span-auto">.grid-auto.min_l</code>
</h4>
<div class="grid-auto min_l text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
</div>

<h4 class="ma-t_m ma-b_s flex wrap-no text-clip">
  <span>Extra large min size</span>
  <code class="span-auto">.grid-auto.min_xl</code>
</h4>
<div class="grid-auto min_xl text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
</div>


<h3 class="ma-t_xl ma-b_s" id="grid-auto-spans">
  Spans and gaps
</h3>
<p class="text_l read_xl ma-t_s ma-b_m">
  Add <a href="#grid-gaps">gap-classses</a>, or <a href="#no-gap">gap-no</a> to the auto-grid, <a href="#spans">span-classes</a> on the child elements work as well.
</p>
<div class="grid-auto gap-no text-serif text_s">
  <div class="box text-hyphen span-2 span-12-p bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen span-1 span-12-p bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen span-2 span-12-p bg-d">Aere perennius.</div>
  <div class="box text-hyphen span-1 span-12-p bg-e">Alea iacta est.</div>
  <div class="box text-hyphen span-2 span-12-p bg-f">Aliquis in omnibus est nullus in singulis.</div>
  <div class="box text-hyphen span-1 span-12-p bg-g">Ancipiti plus ferit ense gula</div>
  <div class="box text-hyphen span-1 span-12-p bg-h">Arcem ex cloacâ facĕre.</div>
  <div class="box text-hyphen span-1 span-12-p bg-i">Ave Caesar, morituri te salutant.</div>
  <div class="box text-hyphen span-3 span-12-p bg-j">Beati pauperes spiritu</div>
  <div class="box text-hyphen span-1 span-12-p bg-k">Carpe diem.</div>
  <div class="box text-hyphen span-1 span-12-p bg-l">Carpe noctem.</div>
  <div class="box text-hyphen span-2 span-12-p bg-m">Carthago delenda est.</div>
  <div class="box text-hyphen span-2 span-12-p bg-n">Ductus exemplo.</div>
  <div class="box text-hyphen span-1 span-12-p bg-o">Dum spiro spero</div>
</div>


<h3 class="ma-t_xl ma-b_s" id="grid-auto-custom">
  Custom automatic grid
</h3>
<p class="text_l read_xl ma-t_s ma-b_m">
  Last not least — you can change the min and max values of the childs using CSS Vars. Match the grid specs to your content. Check out the <a href="/examples/real-world#profile-cards">profile cards</a> example to see this in action.
</p>
<div class="grid-auto custom text-serif text_s">
  <div class="box text-hyphen bg-b">Ad praesens ova cras pullis sunt meliora</div>
  <div class="box text-hyphen bg-c">Aequam memento rebus in arduis servare mentem</div>
  <div class="box text-hyphen bg-d">Aere perennius.</div>
  <div class="box text-hyphen bg-e">Alea iacta est.</div>
  <div class="box text-hyphen bg-f">Aliquis in omnibus est nullus in singulis.</div>
  <div class="box text-hyphen bg-g">Ancipiti plus ferit ense gula</div>
  <div class="box text-hyphen bg-h">Arcem ex cloacâ facĕre.</div>
  <div class="box text-hyphen bg-i">Ave Caesar, morituri te salutant.</div>
  <div class="box text-hyphen bg-j">Beati pauperes spiritu</div>
  <div class="box text-hyphen bg-k">Carpe diem.</div>
  <div class="box text-hyphen bg-l">Carpe noctem.</div>
  <div class="box text-hyphen bg-m">Carthago delenda est.</div>
</div>