Grid
The Grid System
Page Grid
A configurable grid designed to be used for page containers, with a main center column for content and gutters on each side. The main center column will expand until it reaches a max-width, at which point it will remain constrained and centered at that width.
Give all children of the grid a
--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 placementProperty
Applies to
--grid-pagegrid-template-columns--grid-page-maingrid-column
1
.page {
2
display: grid;
3
grid-template-columns: var(--grid-page);
4
}
5
​
6
.page > * {
7
grid-column: var(--grid-page-main);
8
}
9
​
10
.page > .fullwidth {
11
grid-column: 1 / -1;
12
}
Copied!
Configuration
Each aspect of the page grid is configurable with CSS variables. Set them either on the
:root pseudo-element to apply globally, or on an individual page grid to apply just for that element.Property
Default
Description
--grid-page-widthvar(--width-xl)Max width of the main content area
--grid-page-gutter5vwWidth of the page gutters until the content area max with is reached
1
:root {
2
--grid-page-gutter: var(--size-10);
3
--grid-page-width: var(--width-lg);
4
}
Copied!
Grid Template
Helpers for quickly setting common grid templates
Property Group
Applies to
--grid-grid-template-columns and grid-template-rows
1
.grid {
2
display: grid;
3
grid-template-columns: var(--grid-12);
4
}
Copied!
Property
Value
--grid-2repeat(2, minmax(0, 1fr))--grid-3repeat(3, minmax(0, 1fr))--grid-4repeat(4, minmax(0, 1fr))--grid-5repeat(5, minmax(0, 1fr))--grid-6repeat(6, minmax(0, 1fr))--grid-7repeat(7, minmax(0, 1fr))--grid-8repeat(8, minmax(0, 1fr))--grid-9repeat(9, minmax(0, 1fr))--grid-10repeat(10, minmax(0, 1fr))--grid-11repeat(11, minmax(0, 1fr))--grid-12repeat(12, minmax(0, 1fr))Last modified 1mo ago
Copy link
Edit on GitHub