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