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.
xxxxxxxxxx<small>.grid.flow-column</small><div class="grid flow-column mb-4"> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div></div><small>.grid.flow-row</small><div class="grid flow-row"> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div></div>Columns
.columns-auto
Creates a grid container with columns that automatically size.
xxxxxxxxxx<small>.grid.columns-auto</small><div class="grid columns-auto"> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div> <div class="border-1 border-gray-3 p-4 bg-gray-1"></div></div>.grid.columns-{1-12}
Creates a grid container with 1-12 columns.
xxxxxxxxxx<small>.grid.columns-2</small><div class="grid columns-2 mb-4"> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">1</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">2</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">3</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">4</div></div>Rows
.grid.rows-auto
Creates a grid container with auto rows.
xxxxxxxxxx<small>.grid.flow-column.rows-auto</small><div class="grid flow-column rows-auto mb-4"> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">1</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">2</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">3</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">4</div></div>.grid.rows-{1-12}
Creates a grid container with 1-12 rows.
xxxxxxxxxx<small>.grid.flow-column.rows-2</small><div class="grid flow-column rows-2 mb-4"> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">1</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">2</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">3</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">4</div></div>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.
xxxxxxxxxx<div class="grid columns-2 gap-4"> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">1</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">2</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">3</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">4</div></div>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}.
xxxxxxxxxx<div class="grid columns-3 gap-4"> <div class="column-span-full border-1 border-gray-3 p-4 bg-gray-1 text-center">1</div> <div class="row-span-2 border-1 border-gray-3 p-4 bg-gray-1 text-center">2</div> <div class="column-span-2 border-1 border-gray-3 p-4 bg-gray-1 text-center">3</div> <div class="border-1 border-gray-3 p-4 bg-gray-1 text-center">4</div></div>