Grid
The Grid System
Pollen comes with an optional set of helpers for creating and maintaining CSS grids in a project. Add it to your project by importing its CSS file
With javascript
1
import 'pollen-css/addons/grid.css';
Copied!
From Unpkg CDN
1
<link rel="stylesheet" href="https://unpkg.com/pollen-css/addons/grid.css" />
Copied!

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
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-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
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-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))
Last modified 1d ago
Copy link
Edit on GitHub