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 conditional queries.

<div class="grid-template:none:hover grid-template:none@sm grid-template:none@dark grid-template:none@print"></div>
Syntax
Grid Rows

Style utility for creating multiple grid rows.

Syntax
Grid Template Areas

Setting areas in the grid container

© Aoyue Design LLC.