Utilities
Grid
Template columns and rows, spans, start and end lines, auto flow and implicit tracks.
111classes
314variant classes
11properties
Live example
<div class="grid grid-cols-4 gap-3">
<div class="col-span-2 row-span-2 grid place-items-center rounded-xl bg-primary text-primary-foreground text-sm font-semibold min-h-32">col-span-2 row-span-2</div>
<div class="grid place-items-center rounded-xl bg-surface-3 text-sm h-16">1</div>
<div class="grid place-items-center rounded-xl bg-surface-3 text-sm h-16">2</div>
<div class="col-span-2 grid place-items-center rounded-xl bg-accent text-accent-foreground text-sm font-semibold h-16">col-span-2</div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example md:grid-cols-1. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | sm:md:lg:xl:2xl: | 27 |
| Containers | @xs:@sm:@md:@lg:@xl: | 25 |
| Media and direction | print:screen: | 27 |
Grid template columns 14
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
grid-cols-none | grid-template-columns: none; | sm md lg xl 2xl print screen |
grid-cols-subgrid | grid-template-columns: subgrid; |
Grid column 14
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
col-auto | grid-column: auto; | sm md lg xl 2xl print screen |
col-span-1 | grid-column: span 1 / span 1; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-2 | grid-column: span 2 / span 2; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-3 | grid-column: span 3 / span 3; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-4 | grid-column: span 4 / span 4; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-5 | grid-column: span 5 / span 5; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-6 | grid-column: span 6 / span 6; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-7 | grid-column: span 7 / span 7; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-8 | grid-column: span 8 / span 8; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-9 | grid-column: span 9 / span 9; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-10 | grid-column: span 10 / span 10; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-11 | grid-column: span 11 / span 11; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-12 | grid-column: span 12 / span 12; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
col-span-full | grid-column: 1 / -1; | sm md lg xl 2xl @xs @sm @md @lg @xl print screen |
Grid column start 14
Variants: none
| Class | CSS |
|---|---|
col-start-1 | grid-column-start: 1; |
col-start-2 | grid-column-start: 2; |
col-start-3 | grid-column-start: 3; |
col-start-4 | grid-column-start: 4; |
col-start-5 | grid-column-start: 5; |
col-start-6 | grid-column-start: 6; |
col-start-7 | grid-column-start: 7; |
col-start-8 | grid-column-start: 8; |
col-start-9 | grid-column-start: 9; |
col-start-10 | grid-column-start: 10; |
col-start-11 | grid-column-start: 11; |
col-start-12 | grid-column-start: 12; |
col-start-13 | grid-column-start: 13; |
col-start-auto | grid-column-start: auto; |
Grid column end 14
Variants: none
| Class | CSS |
|---|---|
col-end-1 | grid-column-end: 1; |
col-end-2 | grid-column-end: 2; |
col-end-3 | grid-column-end: 3; |
col-end-4 | grid-column-end: 4; |
col-end-5 | grid-column-end: 5; |
col-end-6 | grid-column-end: 6; |
col-end-7 | grid-column-end: 7; |
col-end-8 | grid-column-end: 8; |
col-end-9 | grid-column-end: 9; |
col-end-10 | grid-column-end: 10; |
col-end-11 | grid-column-end: 11; |
col-end-12 | grid-column-end: 12; |
col-end-13 | grid-column-end: 13; |
col-end-auto | grid-column-end: auto; |
Grid template rows 14
Variants: none
| Class | CSS |
|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); |
grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); |
grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); |
grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); |
grid-rows-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); |
grid-rows-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); |
grid-rows-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); |
grid-rows-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); |
grid-rows-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); |
grid-rows-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
grid-rows-subgrid | grid-template-rows: subgrid; |
Grid row 14
Variants: none
| Class | CSS |
|---|---|
row-auto | grid-row: auto; |
row-span-1 | grid-row: span 1 / span 1; |
row-span-2 | grid-row: span 2 / span 2; |
row-span-3 | grid-row: span 3 / span 3; |
row-span-4 | grid-row: span 4 / span 4; |
row-span-5 | grid-row: span 5 / span 5; |
row-span-6 | grid-row: span 6 / span 6; |
row-span-7 | grid-row: span 7 / span 7; |
row-span-8 | grid-row: span 8 / span 8; |
row-span-9 | grid-row: span 9 / span 9; |
row-span-10 | grid-row: span 10 / span 10; |
row-span-11 | grid-row: span 11 / span 11; |
row-span-12 | grid-row: span 12 / span 12; |
row-span-full | grid-row: 1 / -1; |
Grid row start 7
Variants: none
| Class | CSS |
|---|---|
row-start-1 | grid-row-start: 1; |
row-start-2 | grid-row-start: 2; |
row-start-3 | grid-row-start: 3; |
row-start-4 | grid-row-start: 4; |
row-start-5 | grid-row-start: 5; |
row-start-6 | grid-row-start: 6; |
row-start-7 | grid-row-start: 7; |
Grid row end 7
Variants: none
| Class | CSS |
|---|---|
row-end-1 | grid-row-end: 1; |
row-end-2 | grid-row-end: 2; |
row-end-3 | grid-row-end: 3; |
row-end-4 | grid-row-end: 4; |
row-end-5 | grid-row-end: 5; |
row-end-6 | grid-row-end: 6; |
row-end-7 | grid-row-end: 7; |
Grid auto flow 5
Variants: none
| Class | CSS |
|---|---|
grid-flow-row | grid-auto-flow: row; |
grid-flow-col | grid-auto-flow: column; |
grid-flow-dense | grid-auto-flow: dense; |
grid-flow-row-dense | grid-auto-flow: row dense; |
grid-flow-col-dense | grid-auto-flow: column dense; |
Grid auto columns 4
Variants: none
| Class | CSS |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
Grid auto rows 4
Variants: none
| Class | CSS |
|---|---|
auto-rows-auto | grid-auto-rows: auto; |
auto-rows-min | grid-auto-rows: min-content; |
auto-rows-max | grid-auto-rows: max-content; |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |