--grid-page-main
column value (equal to 2/3
) to place them in the main content area. Easily "break out" of the page grid for full-width panels by giving a child a 1 / -1
column placement--grid-page
grid-template-columns
--grid-page-main
grid-column
:root
pseudo-element to apply globally, or on an individual page grid to apply just for that element.--grid-page-width
var(--width-xl)
--grid-page-gutter
5vw
--grid-
grid-template-columns
and grid-template-rows
--grid-2
repeat(2, minmax(0, 1fr))
--grid-3
repeat(3, minmax(0, 1fr))
--grid-4
repeat(4, minmax(0, 1fr))
--grid-5
repeat(5, minmax(0, 1fr))
--grid-6
repeat(6, minmax(0, 1fr))
--grid-7
repeat(7, minmax(0, 1fr))
--grid-8
repeat(8, minmax(0, 1fr))
--grid-9
repeat(9, minmax(0, 1fr))
--grid-10
repeat(10, minmax(0, 1fr))
--grid-11
repeat(11, minmax(0, 1fr))
--grid-12
repeat(12, minmax(0, 1fr))