Grid Columns ​
Utilities for controlling how elements are sized and placed across grid columns.
| Class Name | CSS Equivalent |
|---|---|
| col-auto | grid-column: auto; |
| col-start-auto | grid-column-start: auto; |
| col-end-auto | grid-column-start: auto; |
| col-span-full | grid-column: 1 / -1; |
| col-span-1 | grid-column: span 1 / span 1; |
| col-span-2 | grid-column: span 2 / span 2; |
| col-span-3 | grid-column: span 3 / span 3; |
| col-span-4 | grid-column: span 4 / span 4; |
| col-span-5 | grid-column: span 5 / span 5; |
| col-span-6 | grid-column: span 6 / span 6; |
| col-span-7 | grid-column: span 7 / span 7; |
| col-span-8 | grid-column: span 8 / span 8; |
| col-span-9 | grid-column: span 9 / span 9; |
| col-span-10 | grid-column: span 10 / span 10; |
| col-span-11 | grid-column: span 11 / span 11; |
| col-span-12 | grid-column: span 12 / span 12; |
| col-start-1 | grid-column-start: 1; |
| col-end-1 | grid-column-end: 1; |
| col-start-2 | grid-column-start: 2; |
| col-end-2 | grid-column-end: 2; |
| col-start-3 | grid-column-start: 3; |
| col-end-3 | grid-column-end: 3; |
| col-start-4 | grid-column-start: 4; |
| col-end-4 | grid-column-end: 4; |
| col-start-5 | grid-column-start: 5; |
| col-end-5 | grid-column-end: 5; |
| col-start-6 | grid-column-start: 6; |
| col-end-6 | grid-column-end: 6; |
| col-start-7 | grid-column-start: 7; |
| col-end-7 | grid-column-end: 7; |
| col-start-8 | grid-column-start: 8; |
| col-end-8 | grid-column-end: 8; |
| col-start-9 | grid-column-start: 9; |
| col-end-9 | grid-column-end: 9; |
| col-start-10 | grid-column-start: 10; |
| col-end-10 | grid-column-end: 10; |
| col-start-11 | grid-column-start: 11; |
| col-end-11 | grid-column-end: 11; |
| col-start-12 | grid-column-start: 12; |
| col-end-12 | grid-column-end: 12; |
| col-start-13 | grid-column-start: 13; |
| col-end-13 | grid-column-end: 13; |
Grid Column Span Full ​
The .col-span-full class sets the grid-column property to span from the first to the last column, effectively spanning the full width of the grid container.
html
<div class="grid grid-cols-6 gap-m w-full">
<div class="col-span-full [...]">1</div>
<div class="[...]">2</div>
<div class="[...]">3</div>
</div>Grid Column Span ​
The .col-span-1 through .col-span-12 classes set the grid-column property to span a specified number of columns within the grid container.
html
<div class="grid grid-cols-6 gap-m w-full">
<div class="[...]">1</div>
<div class="col-span-4 [...]">2</div>
<div class="[...]">3</div>
<div class="[...]">4</div>
</div>Grid Column Start and End ​
The .col-start-1 through .col-start-13 and .col-end-1 through .col-end-13 classes set the grid-column-start and grid-column-end properties to specific values, defining the starting and ending columns for the grid item.
html
<div class="grid grid-cols-6 gap-m w-full">
<div class="[...]">1</div>
<div class=" col-start-3 col-end-6 [...]">2</div>
<div class="[...]">3</div>
<div class="[...]">4</div>
<div class="[...]">5</div>
<div class="[...]">6</div>
</div>