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 placement

PropertyApplies to





.page {
  display: grid;
  grid-template-columns: var(--grid-page);

.page > * {
  grid-column: var(--grid-page-main);

.page > .fullwidth {
  grid-column: 1 / -1;


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.




Max width of the main content area



Width of the page gutters until the content area max with is reached

:root {
 --grid-page-gutter: var(--size-10);
 --grid-page-width: var(--width-lg);

Grid Template

Helpers for quickly setting common grid templates

Property GroupApplies to


grid-template-columns and grid-template-rows

.grid {
  display: grid;
  grid-template-columns: var(--grid-12);


repeat(2, minmax(0, 1fr))


repeat(3, minmax(0, 1fr))


repeat(4, minmax(0, 1fr))


repeat(5, minmax(0, 1fr))


repeat(6, minmax(0, 1fr))


repeat(7, minmax(0, 1fr))


repeat(8, minmax(0, 1fr))


repeat(9, minmax(0, 1fr))


repeat(10, minmax(0, 1fr))


repeat(11, minmax(0, 1fr))


repeat(12, minmax(0, 1fr))

Last updated