4.2.2.4 - Row
Source: layouts/_grid.scss, line 215
Rows can be expended using the class has-row-{breakpoint}-{size}. Sizes go from 0 to 12. .has-row-all can be used as well but in this case, the grid needs to have
grid-template-rows set, so the can grow depending on the number of rows.
There is no fallback for these classes.
Example:
1
2
3
4
5
6
7
8
9
10
<div class="grid has-cols-3 has-cols-sm-5 has-cols-md-4 has-grid-gap-2" style="grid-template-rows: repeat(5, 1fr)"> <!-- Set grid-template-rows for .has-row-all-->
<div class="has-row-all">
<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 class="has-row-2">
<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>