Syntax

Grid Template

Setting grid columns, grid rows, and grid areas.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
grid-template:valuegrid-template: value;
grid-template:rows/columnsgrid-template: rows/columns;
grid-template:areas|rows/columnsgrid-template: areas rows/columns;
grid-template:nonegrid-template: none;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="grid-template:none:hover grid-template:none@sm grid-template:none@dark grid-template:none@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.