Elements logo

Grid template columns

Utilities for specifying the columns in a grid layout

Class reference

ClassProperties
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-16grid-template-columns: repeat(16, minmax(0, 1fr));
grid-cols-24grid-template-columns: repeat(24, minmax(0, 1fr));
grid-cols-nonegrid-template-columns: none;

Usage

Use the grid-cols-{n} utilities to create grids with n equally sized columns.

1
2
3
4
5
6
7
8
9
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

Responsive

To control the columns of a grid at a specific breakpoint, add a {screen}: prefix to any existing grid-template-columns utility. For example, use md:grid-cols-6 to apply the grid-cols-6 utility at only medium screen sizes and above.

<div class="grid grid-cols-1 **md:grid-cols-6**">
  <!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.