Grid Template Columns
Below, utility classes to apply grid-template-columns
property.
@for
$value
from 0 through 12
Class | Properties |
---|---|
.grid-columns-none | grid-template-columns: none; |
.grid-columns-<value> | grid-template-columns: repeat(#{$value}, minmax(0, 1fr)); |
Example(s)
1
2
3
4
5
6
7
8
9
html
<div class="grid grid-columns-3 flow-row gap-2 ...">
<div class="w-1/1 h-12 ...">1</div>
<div class="w-1/1 h-12 ...">2</div>
<div class="w-1/1 h-12 ...">3</div>
<div class="w-1/1 h-12 ...">4</div>
<div class="w-1/1 h-12 ...">5</div>
<div class="w-1/1 h-12 ...">6</div>
<div class="w-1/1 h-12 ...">7</div>
<div class="w-1/1 h-12 ...">8</div>
<div class="w-1/1 h-12 ...">9</div>
</div>