Teutonic CSS

Columns count

→

Add a class from .cols-2 up to .cols-10 in addition to the .columns class to control over how many columns the content should span.

The distribution of contents over the number of columns is a bit tricky. For the best visual result, adjust the number of columns based on the number of content items.

Syntax: .columns.cols-{number}

SCSS: _columns.scss _column-count.scss

2 columns

3 columns

4 columns

5 columns

12 can not be devided by 5. ↑

6 columns

<h3 class="ma-t_m pa-b_xs">2 columns</h3>
<div class="columns gap-no cols-2 gap_ text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
</div>


<h3 class="ma-t_m pa-b_xs">3 columns</h3>
<div class="columns gap-no cols-3 gap_ text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
</div>


<h3 class="ma-t_m pa-b_xs">4 columns</h3>
<div class="columns gap-no cols-4 gap_ text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
</div>


<h3 class="ma-t_m pa-b_xs">5 columns</h3>
<div class="columns gap-no cols-5 gap_ text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
</div>

<p class="text_s ma-t_xs text-right">
  12 can not be devided by 5. &uarr;
</p>


<h3 class="ma-t_m pa-b_xs">6 columns</h3>
<div class="columns gap-no cols-6 gap_ text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
</div>

No gap

→

Add .gap-no to the CSS columns to have a collapse border look. See this example for the same method in other grid types.

Syntax: .columns.gap-no

SCSS: _gap-no.scss

<div class="columns cols-5 cols-4-t cols-2-p gap-no text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
  <div class="box text-clip bg-n">13</div>
  <div class="box text-clip bg-o">14</div>
  <div class="box text-clip bg-p">15</div>
  <div class="box text-clip bg-q">16</div>
  <div class="box text-clip bg-r">17</div>
  <div class="box text-clip bg-s">18</div>
  <div class="box text-clip bg-t">19</div>
  <div class="box text-clip bg-u">20</div>
  <div class="box text-clip bg-v">21</div>
  <div class="box text-clip bg-w">22</div>
  <div class="box text-clip bg-x">23</div>
</div>

Gaps

→

This controls the horizontal gutter space between the columns and the vertical space of the childs. So setting this will give some space left and right and below on top of each column item.

Syntax: .gap_{size}

SCSS: _column-gaps.scss

Extra small

.gap_xs

Small

.gap_s

Medium

.gap_m

Custom

.gap-custom

<h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Extra small</div>
  <div class="span-auto text-thin text-mono">.gap_xs</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap_xs text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
  <div class="box text-clip bg-n">13</div>
  <div class="box text-clip bg-o">14</div>
  <div class="box text-clip bg-p">15</div>
  <div class="box text-clip bg-q">16</div>
  <div class="box text-clip bg-r">17</div>
  <div class="box text-clip bg-s">18</div>
  <div class="box text-clip bg-t">19</div>
  <div class="box text-clip bg-u">20</div>
</div><h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Small</div>
  <div class="span-auto text-thin text-mono">.gap_s</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap_s text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
  <div class="box text-clip bg-n">13</div>
  <div class="box text-clip bg-o">14</div>
  <div class="box text-clip bg-p">15</div>
  <div class="box text-clip bg-q">16</div>
  <div class="box text-clip bg-r">17</div>
  <div class="box text-clip bg-s">18</div>
  <div class="box text-clip bg-t">19</div>
  <div class="box text-clip bg-u">20</div>
</div><h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Medium</div>
  <div class="span-auto text-thin text-mono">.gap_m</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap_m text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
  <div class="box text-clip bg-n">13</div>
  <div class="box text-clip bg-o">14</div>
  <div class="box text-clip bg-p">15</div>
  <div class="box text-clip bg-q">16</div>
  <div class="box text-clip bg-r">17</div>
  <div class="box text-clip bg-s">18</div>
  <div class="box text-clip bg-t">19</div>
  <div class="box text-clip bg-u">20</div>
</div>


<h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Custom</div>
  <div class="span-auto text-thin text-mono">.gap-custom</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap-custom text-mono">
  <div class="box text-clip bg-b">1</div>
  <div class="box text-clip bg-c">2</div>
  <div class="box text-clip bg-d">3</div>
  <div class="box text-clip bg-e">4</div>
  <div class="box text-clip bg-f">5</div>
  <div class="box text-clip bg-g">6</div>
  <div class="box text-clip bg-h">7</div>
  <div class="box text-clip bg-i">8</div>
  <div class="box text-clip bg-j">9</div>
  <div class="box text-clip bg-k">10</div>
  <div class="box text-clip bg-l">11</div>
  <div class="box text-clip bg-m">12</div>
  <div class="box text-clip bg-n">13</div>
  <div class="box text-clip bg-o">14</div>
  <div class="box text-clip bg-p">15</div>
  <div class="box text-clip bg-q">16</div>
  <div class="box text-clip bg-r">17</div>
  <div class="box text-clip bg-s">18</div>
  <div class="box text-clip bg-t">19</div>
  <div class="box text-clip bg-u">20</div>
</div>

Horizontal gaps

→

This controls only the horizontal gutter space between the columns.

Syntax: .gap-h_{size}

SCSS: _column-gaps.scss

Extra small

.gap-h_xs

Small

.gap-h_s

Medium

.gap-h_m

<h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Extra small</div>
  <div class="span-auto text-thin text-mono">.gap-h_xs</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap-h_xs text-mono">
  <div class="box text-clip bg-b ma-b_px-">1</div>
  <div class="box text-clip bg-c ma-b_px-">2</div>
  <div class="box text-clip bg-d ma-b_px-">3</div>
  <div class="box text-clip bg-e ma-b_px-">4</div>
  <div class="box text-clip bg-f ma-b_px-">5</div>
  <div class="box text-clip bg-g ma-b_px-">6</div>
  <div class="box text-clip bg-h ma-b_px-">7</div>
  <div class="box text-clip bg-i ma-b_px-">8</div>
  <div class="box text-clip bg-j ma-b_px-">9</div>
  <div class="box text-clip bg-k ma-b_px-">10</div>
  <div class="box text-clip bg-l ma-b_px-">11</div>
  <div class="box text-clip bg-m ma-b_px-">12</div>
  <div class="box text-clip bg-n ma-b_px-">13</div>
  <div class="box text-clip bg-o ma-b_px-">14</div>
  <div class="box text-clip bg-p ma-b_px-">15</div>
  <div class="box text-clip bg-q ma-b_px-">16</div>
  <div class="box text-clip bg-r ma-b_px-">17</div>
  <div class="box text-clip bg-s ma-b_px-">18</div>
  <div class="box text-clip bg-t ma-b_px-">19</div>
  <div class="box text-clip bg-u ma-b_px-">20</div>
</div><h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Small</div>
  <div class="span-auto text-thin text-mono">.gap-h_s</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap-h_s text-mono">
  <div class="box text-clip bg-b ma-b_px-">1</div>
  <div class="box text-clip bg-c ma-b_px-">2</div>
  <div class="box text-clip bg-d ma-b_px-">3</div>
  <div class="box text-clip bg-e ma-b_px-">4</div>
  <div class="box text-clip bg-f ma-b_px-">5</div>
  <div class="box text-clip bg-g ma-b_px-">6</div>
  <div class="box text-clip bg-h ma-b_px-">7</div>
  <div class="box text-clip bg-i ma-b_px-">8</div>
  <div class="box text-clip bg-j ma-b_px-">9</div>
  <div class="box text-clip bg-k ma-b_px-">10</div>
  <div class="box text-clip bg-l ma-b_px-">11</div>
  <div class="box text-clip bg-m ma-b_px-">12</div>
  <div class="box text-clip bg-n ma-b_px-">13</div>
  <div class="box text-clip bg-o ma-b_px-">14</div>
  <div class="box text-clip bg-p ma-b_px-">15</div>
  <div class="box text-clip bg-q ma-b_px-">16</div>
  <div class="box text-clip bg-r ma-b_px-">17</div>
  <div class="box text-clip bg-s ma-b_px-">18</div>
  <div class="box text-clip bg-t ma-b_px-">19</div>
  <div class="box text-clip bg-u ma-b_px-">20</div>
</div><h4 class="flex wrap-no ma-b_xs ma-t_l">
  <div>Medium</div>
  <div class="span-auto text-thin text-mono">.gap-h_m</div>
</h4>
<div class="columns cols-5 cols-4-t cols-2-p gap-h_m text-mono">
  <div class="box text-clip bg-b ma-b_px-">1</div>
  <div class="box text-clip bg-c ma-b_px-">2</div>
  <div class="box text-clip bg-d ma-b_px-">3</div>
  <div class="box text-clip bg-e ma-b_px-">4</div>
  <div class="box text-clip bg-f ma-b_px-">5</div>
  <div class="box text-clip bg-g ma-b_px-">6</div>
  <div class="box text-clip bg-h ma-b_px-">7</div>
  <div class="box text-clip bg-i ma-b_px-">8</div>
  <div class="box text-clip bg-j ma-b_px-">9</div>
  <div class="box text-clip bg-k ma-b_px-">10</div>
  <div class="box text-clip bg-l ma-b_px-">11</div>
  <div class="box text-clip bg-m ma-b_px-">12</div>
  <div class="box text-clip bg-n ma-b_px-">13</div>
  <div class="box text-clip bg-o ma-b_px-">14</div>
  <div class="box text-clip bg-p ma-b_px-">15</div>
  <div class="box text-clip bg-q ma-b_px-">16</div>
  <div class="box text-clip bg-r ma-b_px-">17</div>
  <div class="box text-clip bg-s ma-b_px-">18</div>
  <div class="box text-clip bg-t ma-b_px-">19</div>
  <div class="box text-clip bg-u ma-b_px-">20</div>
</div>

Breakpoints

→

Resize your browser window to see different number of columns on the different viewport breakoints desktop, tablet and phone.

The breakpoint classes are applied on the parental column container, not on the childs like with Flexbox breakpoints or CSS grid. That’s because columns have a uniform table like look.

Syntax: .cols-{number}-{breakpoint}

SCSS: _column-breakpoints.scss

↑
9 columns on desktop
6 columns on tablet
3 columns on phone

<div class="columns gap-no cols-9 cols-6-t cols-3-p text-mono">
  <div class="box text-clip">1</div>
  <div class="box text-clip">2</div>
  <div class="box text-clip">3</div>
  <div class="box text-clip">4</div>
  <div class="box text-clip">5</div>
  <div class="box text-clip">6</div>
  <div class="box text-clip">7</div>
  <div class="box text-clip">8</div>
  <div class="box text-clip">9</div>
  <div class="box text-clip">10</div>
  <div class="box text-clip">11</div>
  <div class="box text-clip">12</div>
  <div class="box text-clip">13</div>
  <div class="box text-clip">14</div>
  <div class="box text-clip">15</div>
  <div class="box text-clip">16</div>
  <div class="box text-clip">17</div>
  <div class="box text-clip">18</div>
  <div class="box text-clip">19</div>
  <div class="box text-clip">20</div>
  <div class="box text-clip">21</div>
  <div class="box text-clip">22</div>
  <div class="box text-clip">23</div>
  <div class="box text-clip">24</div>
  <div class="box text-clip">25</div>
  <div class="box text-clip">26</div>
  <div class="box text-clip">27</div>
  <div class="box text-clip">28</div>
  <div class="box text-clip">29</div>
  <div class="box text-clip">30</div>
  <div class="box text-clip">31</div>
  <div class="box text-clip">32</div>
  <div class="box text-clip">33</div>
  <div class="box text-clip">34</div>
  <div class="box text-clip">35</div>
  <div class="box text-clip">36</div>
  <div class="box text-clip">37</div>
  <div class="box text-clip">38</div>
  <div class="box text-clip">39</div>
  <div class="box text-clip">40</div>
  <div class="box text-clip">41</div>
  <div class="box text-clip">42</div>
</div>
<p>
  &uarr;<br>
  9 columns on desktop<br>
  6 columns on tablet<br>
  3 columns on phone
</p>

Form columns

→

This example shows another application for columns. You can have your form elements flow in a И way as well.

SCSS: _columns.scss _form-box.scss

Text

Text with datalist

Text:readonly

Text:disabled

Password

Number

Tel

URL

<div class="columns cols-3 cols-2-p gap_xs gap-h_s">
  <div class="form-box">
  <label for="e-text" class="mini-label">Text</label>
  <input class="input" type="text" id="e-text" placeholder="Just text">
</div>
<div class="form-box">
  <label for="e-fav-fruit" class="mini-label">Text with datalist</label>
    <input class="input" type="text" list="fruits" id="e-fav-fruit" placeholder="data-list example">
    <datalist id="fruits">
      <option value="Apple">
      <option value="Orange">
      <option value="Peach">
      <option value="Melon">
      <option value="Strawberry">
    </datalist>
</div>
<div class="form-box">
  <label for="e-text-readonly" class="mini-label">Text:readonly</label>
  <input class="input" type="text" id="e-text-readonly" value="Only to read." readonly>
</div>
<div class="form-box">
  <label for="e-text-disabled" class="mini-label">Text:disabled</label>
  <input class="input" type="text" id="e-text-disabled" value="Disabled." disabled>
</div>
<div class="form-box">
  <label for="e-password" class="mini-label">Password</label>
  <input class="input" type="password" id="e-password" placeholder="•••••••••••">
</div>
<div class="form-box">
  <label for="e-email" class="required mini-label">Email</label>
  <input class="input" type="email" id="e-email" name="email" required>
</div>
<div class="form-box">
  <label for="e-number" class="mini-label">Number</label>
  <input class="input" type="number" name="number" id="e-number" value="42">
</div>
<div class="form-box">
  <label for="e-tel" class="mini-label">Tel</label>
  <input class="input" type="tel" name="tel" id="e-tel">
</div>
<div class="form-box">
  <label for="e-url" class="mini-label">URL</label>
  <input class="input" type="url" name="url" id="e-url" placeholder="https://www.fortrabbit.com">
</div>
</div>

Text columns

→

Columns are intentionally made for text contents in a newspaper style layout. You can do this as well.

Syntax: .columns.break-inside

SCSS: _columns.scss

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Source: www.blindtextgenerator.de

<article class="columns text_s break-inside cols-5 cols-3-t collapse-p gap-h_l">
  <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. <em>Source: www.blindtextgenerator.de</em></p>

</article>

Borders

→

Set a vertical border between the columns.

Syntax: .gap-bo_{size}

SCSS: _columns.scss

Pixel

.gap-bo_px

Extra small

.gap-bo_xs

Small

.gap-bo_s

<h4 class="flex wrap-no ma-b_xs ma-b_m">
  <div>Pixel</div>
  <div class="span-auto text-thin text-mono">.gap-bo_px</div>
</h4>
<article class="columns text-serif cols-4 cols-2-t collapse-p gap-h_l gap-bo_px">
  Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. _Source: www.blindtextgenerator.de_
</article><h4 class="flex wrap-no ma-b_xs ma-b_m ma-t_l">
  <div>Extra small</div>
  <div class="span-auto text-thin text-mono">.gap-bo_xs</div>
</h4>
<article class="columns text-serif cols-4 cols-2-t collapse-p gap-h_l gap-bo_xs">
  Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. _Source: www.blindtextgenerator.de_
</article><h4 class="flex wrap-no ma-b_xs ma-b_m ma-t_l">
  <div>Small</div>
  <div class="span-auto text-thin text-mono">.gap-bo_s</div>
</h4>
<article class="columns text-serif cols-4 cols-2-t collapse-p gap-h_l gap-bo_s">
  Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. _Source: www.blindtextgenerator.de_
</article>

CSS Columns content iteration

2 columns

3 columns

4 columns

5 columns

6 columns

Extra small .gap_xs

Small .gap_s

Medium .gap_m

Custom .gap-custom

Extra small .gap-h_xs

Small .gap-h_s

Medium .gap-h_m

Pixel .gap-bo_px

Extra small .gap-bo_xs

Small .gap-bo_s