Grid - Pollen

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
Property
Applies to
--grid-page
grid-template-columns
--grid-page-main
grid-column
.page {
  display: grid;
  grid-template-columns: var(--grid-page);
}
​
.page > * {
  grid-column: var(--grid-page-main);
}
​
.page > .fullwidth {
  grid-column: 1 / -1;
}
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-width
var(--width-xl)
Max width of the main content area
--grid-page-gutter
5vw
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 Group
Applies to
--grid-
grid-template-columns and grid-template-rows
.grid {
  display: grid;
  grid-template-columns: var(--grid-12);
}
Property
Value
--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))

Modules - Previous

Next - Modules

Colors

Last modified 9mo ago

Copy link

Edit on GitHub

On this page

Page Grid

Configuration

Grid Template