Syntax

grid-template-columns🚧

Creating columns in a grid layout.

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

Overview

ClassDeclarations
grid-template-cols:valuegrid-template-columns: 1748.4551545604554rem;
grid-auto-cols:repeat(min,max)grid-auto-columns: repeat(min,max);
grid-auto-cols:fit-content(min,max)grid-auto-columns: fit-content(min,max);
grid-auto-cols:minmax(min,max)grid-auto-columns: minmax(min,max);
grid-template-cols:nonegrid-template-columns: none;
grid-auto-cols:mingrid-auto-columns: min-content;
grid-auto-cols:maxgrid-auto-columns: max-content;

Conditionally apply

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

<div class="grid-template-columns:none:hover grid-template-columns:none@sm grid-template-columns:none@dark grid-template-columns:none@print">…</div>
Syntax
grid-template-areas

Setting areas in the grid container

Syntax
grid-template-rows

Creating rows in a grid layout.

© Aoyue Design LLC.