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

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

1
2
3
4
5
6
7
8
9
10
11
12

3 columns

1
2
3
4
5
6
7
8
9
10
11
12

4 columns

1
2
3
4
5
6
7
8
9
10
11
12

5 columns

1
2
3
4
5
6
7
8
9
10
11
12

12 can not be devided by 5. ↑

6 columns

1
2
3
4
5
6
7
8
9
10
11
12
<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>