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

<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>