4.2.1 - Grid - Set number of columns
Source: layouts/_grid.scss, line 136
The number of columns can be change by adding .has-cols-{bp}-{num-of-cols}. bp is optional, number of columns goes from 1 to 12.
{breakpoint} is set from the $breakpoints map (see variables), {size} are set as well in variables. It goes from 0 to 12 ($grid-columns).
Resize the window to see changes.
Examples:
Default styling
1
2
3
4
5
6
7
8
9
10
.has-cols-md-1
1 col layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-2
2 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-3
3 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-4
4 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-5
5 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-6
6 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-7
7 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-8
8 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-9
9 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-10
10 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-11
11 cols layout
1
2
3
4
5
6
7
8
9
10
.has-cols-md-12
12 cols layout
1
2
3
4
5
6
7
8
9
10
<div class="grid [modifier] has-cols-5 has-grid-gap-3">
<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>