Atomic Bulldog - UI/pattern library

4.2.2.3 - Gaps

Source: layouts/_grid.scss, line 306

Open in new window

Grid gap can be change using .has-grid-gap-{size} class. This class use the $spacers map variables

Examples:

Default styling
1
2
3
4
5
6
7
8
9
10
.has-grid-gap-0

Grid Gap 0

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-1

Grid Gap 1

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-2

Grid Gap 2

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-3

Grid Gap 3

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-4

Grid Gap 4

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-5

Grid Gap 5

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-6

Grid Gap 6

1
2
3
4
5
6
7
8
9
10
<div class="grid has-cols-5 [modifier]">
  <div>
    <div class="kss-box">1</div>
  </div>
  <div>
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div>
      <div class="kss-box">4</div>
  </div>
  <div>
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
  <div>
      <div class="kss-box">7</div>
  </div>
  <div>
      <div class="kss-box">8</div>
  </div>
  <div>
      <div class="kss-box">9</div>
  </div>
  <div>
      <div class="kss-box">10</div>
  </div>
</div>