Teutonic CSS

Basic grid

→

This is the bare naked grid. The content containers are wrapping over multiple implicit rows. This example makes no sense for daily usage, but it shows you the underlying structure of the grid.

You can customize the number of columns by adjustng the CSS Var --grid-cols. This looks similar to the Flexbox basic grid, but is different.

Syntax: .grid

SCSS: _grid.scss

Standard 12 columns grid

Custom number of grid columns

<h3 class="ma-b_s">
  Standard 12 columns grid
</h3>
<div class="grid gap_s">
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
</div>
<h3 class="ma-b_s ma-t_m">
  Custom number of grid columns
</h3>
<div class="grid gap_s custom">
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
  <div class="box span-1">&nbsp;</div>
</div>

Spans

→

Grid is even more fun when working with span classes. With a 12 columns grid, a .span-6 will use half of the width of a row, while .span-4 will use a third and .span-12 will cover the whole row.

Syntax: .span-{size}

SCSS: _grid-spans.scss

span-2

span-3

span-4

span-6

span-12

span-8

span-4

span-6

span-3

<div class="grid gap_s">
  <div class="box text-clip text-mono bg-b span-2">span-2</div>
  <div class="box text-clip text-mono bg-c span-2">span-2</div>
  <div class="box text-clip text-mono bg-d span-2">span-2</div>
  <div class="box text-clip text-mono bg-e span-2">span-2</div>
  <div class="box text-clip text-mono bg-f span-2">span-2</div>
  <div class="box text-clip text-mono bg-g span-2">span-2</div>
  <div class="box text-clip text-mono bg-h span-3">span-3</div>
  <div class="box text-clip text-mono bg-i span-3">span-3</div>
  <div class="box text-clip text-mono bg-j span-3">span-3</div>
  <div class="box text-clip text-mono bg-k span-3">span-3</div>
  <div class="box text-clip text-mono bg-l span-4">span-4</div>
  <div class="box text-clip text-mono bg-m span-4">span-4</div>
  <div class="box text-clip text-mono bg-n span-4">span-4</div>
  <div class="box text-clip text-mono bg-o span-6">span-6</div>
  <div class="box text-clip text-mono bg-p span-6">span-6</div>
  <div class="box text-clip text-mono bg-q span-12">span-12</div>
  <div class="box text-clip text-mono bg-r span-8">span-8</div>
  <div class="box text-clip text-mono bg-s span-4">span-4</div>
  <div class="box text-clip text-mono bg-t span-6">span-6</div>
  <div class="box text-clip text-mono bg-u span-3">span-3</div>
  <div class="box text-clip text-mono bg-v span-3">span-3</div>
</div>

No gap

→

The .gap-no is a unique to Teutonic CSS. It gives you a border-collapsed look. Here you see how it in combination with the CSS grid.

The gap-no class also works standalone (vertically stacked), as well as with the Flexbox grid and the CSS columns.

Syntax: .grid.gap-no

SCSS: _gap-no.scss _grid.scss

No gutter .grid.gap-no

<h4 class="flex wrap-no">
  <span>No gutter</span>
  <span class="span-auto text-thin text-mono">.grid.gap-no</span>
</h4>
<div class="grid gap-no ma-t_s">
  <div class="span-2 box text-clip text-mono bg-b">&nbsp;</div>
  <div class="span-2 box text-clip text-mono bg-c">&nbsp;</div>
  <div class="span-2 box text-clip text-mono bg-d">&nbsp;</div>
  <div class="span-2 box text-clip text-mono bg-e">&nbsp;</div>
  <div class="span-2 box text-clip text-mono bg-f">&nbsp;</div>
  <div class="span-2 box text-clip text-mono bg-g">&nbsp;</div>
  <div class="span-3 box text-clip text-mono bg-h">&nbsp;</div>
  <div class="span-3 box text-clip text-mono bg-i">&nbsp;</div>
  <div class="span-3 box text-clip text-mono bg-j">&nbsp;</div>
  <div class="span-3 box text-clip text-mono bg-k">&nbsp;</div>
  
</div>

Gaps

→

Control the vertical and horizonral space between grid container childs with gutter classes.

Caution: the gap spaces add app up to the container width. Overflow will happen, when the grid container get’s smaller than the sum of all gaps.

Syntax: .gap_{size}

SCSS: _grid-gaps.scss

Extra small gap

.grid.gap_xs

Small gap

.grid.gap_s

Medium gap

.grid.gap_m

Custom gap

.grid.gap-custom

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

<!-- Set your own grid gaps -->
<h4 class="flex wrap-no ma-t_l">
  <div>Custom gap</div>
  <div class="span-auto text-thin text-mono">.grid.gap-custom</div>
</h4>
<div class="grid gap-custom ma-t_s text-mono">
  <div class="box text-clip bg-b span-3">&nbsp;</div>
  <div class="box text-clip bg-c span-3">&nbsp;</div>
  <div class="box text-clip bg-d span-3">&nbsp;</div>
  <div class="box text-clip bg-e span-3">&nbsp;</div>
  <div class="box text-clip bg-f span-4">&nbsp;</div>
  <div class="box text-clip bg-g span-4">&nbsp;</div>
  <div class="box text-clip bg-h span-4">&nbsp;</div>
</div>

Horizontal gaps

→

The gutter size alters horizontal and vertical spacing at the same sizing ratio by default. In certain scenatios you want the horizontal and vertical gap spacing to differ.

So you can combine that standard gap classes with an additional horizontal gap class that will overwrite only the horizontal value.

Syntax: .gap-h_{size}

SCSS: _grid-gaps.scss

Horizontally smaller gap

.grid.gap_xs.gap-h_s

Vertically smaller gap

.grid.gap_s.gap-h_xs

<h4 class="flex wrap-no">
  <div>Horizontally smaller gap</div>
  <div class="span-auto text-thin text-mono">.grid.gap_xs.gap-h_s</div>
</h4>
<div class="grid gap_xs gap-h_s ma-t_s text-mono">
  <div class="box text-clip bg-b span-3">&nbsp;</div>
  <div class="box text-clip bg-c span-3">&nbsp;</div>
  <div class="box text-clip bg-d span-3">&nbsp;</div>
  <div class="box text-clip bg-e span-3">&nbsp;</div>
  <div class="box text-clip bg-f span-4">&nbsp;</div>
  <div class="box text-clip bg-g span-4">&nbsp;</div>
  <div class="box text-clip bg-h span-4">&nbsp;</div>
</div>

<h4 class="flex wrap-no ma-t_m">
  <div>Vertically smaller gap</div>
  <div class="span-auto text-thin text-mono">.grid.gap_s.gap-h_xs</div>
</h4>
<div class="grid gap_s gap-h_xs ma-t_s text-mono">
  <div class="box text-clip bg-b span-3">&nbsp;</div>
  <div class="box text-clip bg-c span-3">&nbsp;</div>
  <div class="box text-clip bg-d span-3">&nbsp;</div>
  <div class="box text-clip bg-e span-3">&nbsp;</div>
  <div class="box text-clip bg-f span-4">&nbsp;</div>
  <div class="box text-clip bg-g span-4">&nbsp;</div>
  <div class="box text-clip bg-h span-4">&nbsp;</div>
</div>

Breakpoints

→

With these media query helper classes you can make your containers span over less columns on smaller viewports. Make your browser windows smaller to see how the grid reflows on tablet and phone.

Classes with the breakpoint -t will realign on tablet-like screen resolution size, -p will do so on phone screen size. The example below will have three rows on desktop screens.

Syntax: .span-{columns}-{breakpoint}

SCSS: _grid-breakpoints.scss

span-2 span-4-t span-6-p

span-3 span-6-t span-12-p

↑
2 rows on desktop
4 rows on tablet
7 rows on phone

<div class="grid gap-no ma-b_s text-mono text_s">
  <div class="box text-clip bg-b span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
  <div class="box text-clip bg-c span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
  <div class="box text-clip bg-d span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
  <div class="box text-clip bg-e span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
  <div class="box text-clip bg-f span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
  <div class="box text-clip bg-g span-2 span-4-t span-6-p">span-2 span-4-t span-6-p</div>
  <div class="box text-clip bg-h span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
  <div class="box text-clip bg-i span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
  <div class="box text-clip bg-j span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
  <div class="box text-clip bg-k span-3 span-6-t span-12-p">span-3 span-6-t span-12-p</div>
</div>
<p>
  &uarr;<br>
  2 rows on desktop<br>
  4 rows on tablet<br>
  7 rows on phone
</p>

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>

Nesting

→

You can put a grid into a grid into a grid into a grid. And you can do so with very little markup, as the grid childs can be grid containers themselves.

Syntax: .grid .grid

SCSS: _grid.scss _box.scss

<div class="grid gap_s">
  <div class="span-6 box bg-a grid gap_s">
    <div class="span-6 box bg-d grid gap_xs">
      <div class="box span-6 bg-l"></div>
      <div class="box span-6 bg-l"></div>
    </div>
    <div class="span-6 box bg-d grid gap_xs">
      <div class="box span-6 bg-l"></div>
      <div class="box span-6 bg-l"></div>
    </div>
  </div>
  <div class="span-6 box bg-a grid gap_s">
    <div class="span-6 box bg-d grid gap_xs">
      <div class="box span-6 bg-l"></div>
      <div class="box span-6 bg-l"></div>
    </div>
    <div class="span-6 box bg-d grid gap_xs">
      <div class="box span-6 bg-l"></div>
      <div class="box span-6 bg-l"></div>
    </div>
  </div>
</div>

Auto-height

→

Good to know: The highest grid child defines the height for all siblings in a row.

SCSS: _grid.scss

iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi

Si tacuisses, philosophus mansisses.

Alea iacta est.

Ave Caesar, morituri te salutant.

<div class="grid text-serif">
  <div class="span-6 box bg-a text-hyphen">
    iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi
  </div>
  <div class="span-6 box bg-d text-hyphen">
    Si tacuisses, philosophus mansisses.
  </div>
  <div class="span-6 box bg-j text-hyphen">
    Alea iacta est.
  </div>
  <div class="span-6 box bg-o text-hyphen">
    Ave Caesar, morituri te salutant.
  </div>
</div>

Offset grid

→

As an alternative to the floating spans, you can also define the start and end point of grid items. Mind that this grid has 11 gaps (gutters in between), 12 columns (content areas) and 13 tracks (points to start and end columns).

SCSS: _grid-spans.scss

start-1 end-2

start-2 end-6

start-6 end-12

start-1 end-3

start-5 end-8

start-1 end-4

start-6 end-10

start-4 end-8

start-8 end-13

<div class="grid gap_s">
  <div class="box text-clip text-mono bg-b start-1 end-2">start-1 end-2</div>
  <div class="box text-clip text-mono bg-c start-2 end-6">start-2 end-6</div>
  <div class="box text-clip text-mono bg-d start-6 end-12">start-6 end-12</div>
  <div class="box text-clip text-mono bg-e start-1 end-3">start-1 end-3</div>
  <div class="box text-clip text-mono bg-f start-5 end-8">start-5 end-8</div>
  <div class="box text-clip text-mono bg-g start-1 end-4">start-1 end-4</div>
  <div class="box text-clip text-mono bg-h start-6 end-10">start-6 end-10</div>
  <div class="box text-clip text-mono bg-i start-4 end-8">start-4 end-8</div>
  <div class="box text-clip text-mono bg-j start-8 end-13">start-8 end-13</div>
</div>

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">&nbsp;</div>
  <div class="box text-clip text-mono bg-g">&nbsp;</div>
  <div class="box text-clip text-mono bg-h">&nbsp;</div>
  <div class="box text-clip text-mono bg-i">&nbsp;</div>
  <div class="box text-clip text-mono bg-j">&nbsp;</div>
  <div class="box text-clip text-mono bg-k">&nbsp;</div>
  <div class="box text-clip text-mono bg-l">&nbsp;</div>
  <div class="box text-clip text-mono bg-m">&nbsp;</div>
  <div class="box text-clip text-mono bg-n">&nbsp;</div>
  <div class="box text-clip text-mono bg-o">&nbsp;</div>
  <div class="box text-clip text-mono bg-p">&nbsp;</div>
  <div class="box text-clip text-mono bg-q">&nbsp;</div>
  <div class="box text-clip text-mono bg-r">&nbsp;</div>
  <div class="box text-clip text-mono bg-s">&nbsp;</div>
  <div class="box text-clip text-mono bg-t">&nbsp;</div>
  <div class="box text-clip text-mono bg-u">&nbsp;</div>
  <div class="box text-clip text-mono bg-v">&nbsp;</div>
  <div class="box text-clip text-mono bg-w">&nbsp;</div>
  <div class="box text-clip text-mono bg-x">&nbsp;</div>
  <div class="box text-clip text-mono bg-y">&nbsp;</div>
  <div class="box text-clip text-mono bg-z">&nbsp;</div>
</div>

CSS Grid for the rest of us

Standard 12 columns grid

Custom number of grid columns

No gutter .grid.gap-no

Extra small gap .grid.gap_xs

Small gap .grid.gap_s

Medium gap .grid.gap_m

Custom gap .grid.gap-custom

Horizontally smaller gap .grid.gap_xs.gap-h_s

Vertically smaller gap .grid.gap_s.gap-h_xs

Automatic grid with 16 items

No min size .grid-auto

Medium min size .grid-auto.min_m

Large min size .grid-auto.min_l

Extra large min size .grid-auto.min_xl

Automatic grid with 3 items

No min size .grid-auto

Medium min size .grid-auto.min_m

Large min size .grid-auto.min_l

Extra large min size .grid-auto.min_xl

Spans and gaps

Custom automatic grid

Extra small gap

.grid.gap_xs

Small gap

.grid.gap_s

Medium gap

.grid.gap_m

Custom gap

.grid.gap-custom

Horizontally smaller gap

.grid.gap_xs.gap-h_s

Vertically smaller gap

.grid.gap_s.gap-h_xs

No min size `.grid-auto`

Medium min size `.grid-auto.min_m`

Large min size `.grid-auto.min_l`

Extra large min size `.grid-auto.min_xl`

No min size `.grid-auto`

Medium min size `.grid-auto.min_m`

Large min size `.grid-auto.min_l`

Extra large min size `.grid-auto.min_xl`