Grid Template Columns

Utilities for specifying the columns in a grid layout.

Class Name	CSS Equivalent
grid-cols-none	grid-template-columns: none;
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));

Grid Columns

The .grid-cols-1 through .grid-cols-12 classes set the grid-template-columns property to create a specified number of equally spaced columns within the grid container.

<div class="grid grid-cols-4 gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
  <div class="[...]">7</div>
  <div class="[...]">8</div>
</div>

1

2

3

4

5

6

7

8

Grid Columns None

The .grid-cols-none class sets the grid-template-columns property to none, which effectively removes any columns from the grid container.

<div class="grid grid-cols-none gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3