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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Small
.gap_s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Medium
.gap_m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Custom
.gap-custom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>