Grid Shorthand

Elevate CSS simplifies CSS Grid layouts by introducing a concise shorthand syntax for defining grid properties. This guide explains how to use the grid property with modifiers for rows, columns, and gaps.

<!-- Declaring a Grid Layout -->
<div class="grid:gap-d3:row-2:col-4">

Grid Modifiers

Elevate supports the following modifiers for the grid property:

Modifier	Expected Values	Example
Gap	SpacingToken (e.g., d3)	grid:gap-d3
Row	NumericToken (e.g., 2, 5)	grid:row-2
Col	NumericToken (e.g., 4, 3)	grid:col-4

Examples of Grid Layouts

1. Defining a Gap

Use the gap-{value} modifier to specify the spacing between grid items:

<div class="grid:gap-d3">

2. Setting Rows

Define the number of rows in your grid using the row-{value} modifier:

<div class="grid:row-2">

3. Setting Columns

Define the number of columns in your grid using the col-{value} modifier:

<div class="grid:col-4">

4. Combining Modifiers

Combine multiple modifiers for a complete grid layout:

<div class="grid:gap-d3:row-3:col-5">

Elevate CSS ensures creating grid layouts is intuitive and concise, enabling dynamic designs with minimal effort.