Grid
Control CSS grid layout.
Variables
| Variable | Default |
|---|---|
| $maxColumns | Sets the max number of grid columns and rows. Default: 12 |
| $gaps | List of options for grid-gaps. Default: .25rem, .5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem |
Classes
| Class | Properties |
|---|---|
| .grid | display: grid; |
| .inline-grid | display: inline-grid; |
| .columns-auto | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) |
| .columns-{1-12} | grid-template-columns: {1-12}; |
| .rows-{1-12} | grid-template-rows: {1-12}; |
| .gap-0 | grid-gap: 0; |
| .column-gap-0 | grid-column-gap: 0; |
| .row-gap-0 | grid-row-gap: 0; |
| .gap-{1-8} | grid-gap: {$gaps[1-8]}; |
| .column-gap-{1-8} | grid-column-gap: {$gaps[1-8]}; |
| .row-gap-{1-8} | grid-row-gap: {$gaps[1-8]}; |
| .column-span-full | grid-column: 1/-1; |
| .column-span-{1-12} | grid-column: span {1-12}; |
| .row-span-full | grid-row: 1/-1; |
| .row-span-{1-12} | grid-row: span {1-12}; |
| .flow-column | grid-auto-flow: column; |
| .flow-row | grid-auto-flow: row; |
.grid
Sets the display property to grid.
.flow-{row|column}
Sets the grid-auto-flow property.
Columns
.columns-auto
Creates a grid container with columns that automatically size.
.grid.columns-{1-12}
Creates a grid container with 1-12 columns.
Rows
.grid.rows-auto
Creates a grid container with auto rows.
.grid.rows-{1-12}
Creates a grid container with 1-12 rows.
Gaps
.grid.gap-0
Sets the grid-gap property to 0. You can also
use grid-column-gap or grid-row-gap to set
their respecitve properties.
.grid.gap-{1-8}
Sets the grid-gap property to the corresponding value in
$gaps. You can also use grid-column-gap or
grid-row-gap to set their respecitve properties.
Spans
.column-span-full
Sets the grid-column property to 1/-1 so it
spans the full width of the grid.
.column-span-{1-12}
Sets the grid-column property to span {1-12}.
.row-span-full
Sets the grid-row property to 1/-1 so it spans
the full width of the grid.
.row-span-{1-12}
Sets the grid-row property to span {1-12}.