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: value;
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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.