Utilities
Grid
Generated from the registry, so this page can't drift from the compiler.
columns
Defines equal grid columns, or any template with brackets.
Syntax
columns(value)
columns[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none subgrid |
| number of columns, 1–64 | See type |
Examples and generated CSS
columns(3)
md:columns(6)
columns[200px_1fr].columns\(3\) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.columns\[200px_1fr\] {
grid-template-columns: 200px 1fr;
}
@media (min-width: 768px) {
.md\:columns\(6\) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:columns(3)
hover:columns(3)
lg:focus:columns(3)rows
Defines equal grid rows, or any template with brackets.
Syntax
rows(value)
rows[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none subgrid |
| number of rows, 1–64 | See type |
Examples and generated CSS
rows(3)
md:rows(6)
rows[200px_1fr].rows\(3\) {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.rows\[200px_1fr\] {
grid-template-rows: 200px 1fr;
}
@media (min-width: 768px) {
.md\:rows\(6\) {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:rows(3)
hover:rows(3)
lg:focus:rows(3)gap
Sets the space between grid or flex items.
Syntax
gap(value)
gap[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| var(--name) | See type |
Examples and generated CSS
gap(4)
md:gap(8)
gap[1.5rem].gap\(4\) {
gap: var(--croff-spacing-4);
}
.gap\[1\.5rem\] {
gap: 1.5rem;
}
@media (min-width: 768px) {
.md\:gap\(8\) {
gap: var(--croff-spacing-8);
}
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:gap(4)
hover:gap(4)
lg:focus:gap(4)column-gap
Sets the space between columns.
Syntax
column-gap(value)
column-gap[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| var(--name) | See type |
Examples and generated CSS
column-gap(4)
column-gap[3vw].column-gap\(4\) {
column-gap: var(--croff-spacing-4);
}
.column-gap\[3vw\] {
column-gap: 3vw;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:column-gap(4)
hover:column-gap(4)
lg:focus:column-gap(4)row-gap
Sets the space between rows.
Syntax
row-gap(value)
row-gap[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| var(--name) | See type |
Examples and generated CSS
row-gap(4)
row-gap[3vh].row-gap\(4\) {
row-gap: var(--croff-spacing-4);
}
.row-gap\[3vh\] {
row-gap: 3vh;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:row-gap(4)
hover:row-gap(4)
lg:focus:row-gap(4)grid-flow
Controls how auto-placed items flow.
Syntax
grid-flow(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | row col dense row-dense col-dense |
Examples and generated CSS
grid-flow(col)
grid-flow(row-dense).grid-flow\(col\) {
grid-auto-flow: column;
}
.grid-flow\(row-dense\) {
grid-auto-flow: row dense;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:grid-flow(col)
hover:grid-flow(col)
lg:focus:grid-flow(col)grid-span
Makes an item span columns, and optionally rows.
Syntax
grid-span(columns)
grid-span(columns,rows)
grid-span[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
columns | keyword | full |
| span, 1–64 | See type | |
rows? | keyword | full |
| span, 1–64 | See type |
Examples and generated CSS
grid-span(2)
grid-span(full)
grid-span(2,3)
grid-span[1_/_3].grid-span\(2\) {
grid-column: span 2 / span 2;
}
.grid-span\(2\,3\) {
grid-column: span 2 / span 2;
grid-row: span 3 / span 3;
}
.grid-span\(full\) {
grid-column: 1 / -1;
}
.grid-span\[1_\/_3\] {
grid-column: 1 / 3;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:grid-span(2)
hover:grid-span(2)
lg:focus:grid-span(2)