Grid
Elevate CSS simplifies CSS Grid layouts by introducing a series of concise shorthands for defining grid properties. This guide explains how to use the grid property with modifiers for rows, columns, and gaps as well as setting row and column spans with the row-spans and col-spans properties.
grid Property Modifiers
Elevate supports the following modifiers for the grid property:
| Modifier | Expected Values | Example |
|---|---|---|
| Rows | NumericToken (e.g., 2, up to 12) | grid:rows-2 |
| Cols | NumericToken (e.g., 4, up to 12) | grid:cols-4 |
| Gap | SpacingToken (e.g., d3) | grid:gap-d3 |
| xGap | SpacingToken (e.g., d3) | grid:xgap-d3 |
| yGap | SpacingToken (e.g., d3) | grid:ygap-d3 |
row-spans and col-spans Property Modifiers
The row-spans and col-spans properties can be used to specify the number of rows or columns a cell should span across. These properties accept the following syntax:
| Modifier | Expected Values | Example |
|---|---|---|
| From | NumericToken (e.g., 2, up to 12) or all | col-spans-all |
| To | NumericToken (e.g., 4, up to 12) or all | row-spans:from-1:to-3 |
auto Property Modifiers
The auto properties utilize the passthrough token to allow for more traditionally robust control over the layout of grid items. These properties accept the following syntax:
| Modifier | Expected Values | Example |
|---|---|---|
| ’auto-col’ | PassThroughToken (e.g., (minmax(100px, auto)) ) | auto-col:(minmax(100px, auto)) |
| ’auto-row’ | PassThroughToken (e.g., (minmax(20%, 80vmax)) ) | auto-row:(minmax(20%, 80vmax)) |
| ’auto-flow’ | PassThroughToken (e.g., (row dense) ) | auto-flow:(row dense) |
Examples of Grid Layouts
Elevate CSS ensures creating grid layouts is intuitive and concise, enabling dynamic design with minimal effort while simultaneously preserving the power and flexibility of CSS Grid.
<!-- Declaring a Grid Layout --><div class="grid:gap-d3:rows-2:cols-4"> <div class = "col-spans:from-1:to-3"></div></div>