Grid Template Columns

Style syntax for creating columns in a grid layout.

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

Overview [sr-only]

grid-template-columns:value / grid-template-cols:valuegrid-template-columns: value
grid-template-cols:nonegrid-template-columns: none
grid-auto-cols:mingrid-auto-columns: min-content
grid-auto-cols:maxgrid-auto-columns: max-content
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)

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="grid-template-columns:none:hover grid-template-columns:none@sm grid-template-columns:none@dark grid-template-columns:none@print"></div>
Grid Template Areas

Style syntax for setting areas in the grid container

Grid Template Rows

Style syntax for creating rows in a grid layout.

MIT License © Aoyue Design LLC.