The page grid module establishes the rows, columns and areas onto which child elements can be placed. The page grid is fully responsive.

Setting up a responsive page grid requires two key elements: a container element, and the grid element itself.

The container element takes care of positioning the grid in relation to the page (typically center-justified) and adds outer margins.

The grid element creates the actual columns (and gutters); eight columns for small viewports, sixteen for large.

Any content that is off-grid , a full bleed banner for example, should be placed outside of these two elements.

Grid areas are definable with CSS Grid syntax .

Responsive Methodology

When working with responsive web pages, the mindset should always be mobile-first. This means that your default styles (outside of media queries) should be targeting phones - the smallest of screens. As such, there is no need to have a minimum threshold by wrapping mobile styles inside a media query.

Though our minimum screen width support starts at 320px , in theory this means that default styles will support devices much narrower than that since we don't set a minimum. The 320px is, at best, an implied breakpoint.

Subsequent media queries should increase in screen width and alter the UI styling additively avoiding style declaration duplications when possible. The following CSS shows the grid layout of the Skin website itself.

You can see that for small screens, our top-level landmark elements simply span the full width of the grid. For large screens, things are a little more interesting, and we specify exactly how many rows and columns each landmark should occupy on the grid.

Here is the corresponding HTML.

You can see how it looks on this page by enabling our debug mode , which gives a quick visual indication of the grid columns.

Page Grid SASS/CSS Properties

We've set up CSS properties and SASS constants to provide developers with easy reference for responsive adjustments of UIs. The CSS properties allow for customization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have .

Additionally, we've set up SASS constants for easier reference of the current breakpoints as well as some other dimension/spacing values.

Subgrids

Subgrids allow you to create alignment of child elements on the same grid as page grid. Currently, subgrid only has partial support (with and without CSS Subgrid support), but fallbacks allow for a seamless implementation. You will need to add a bit of CSS on your implementation side to accomplish this.

Firstly, you will need to add a class of page-grid__subgrid to the internal subgrid:

Additionally, you will need to set up the corresponding subgrid CSS as such to allow for support of subgrids in browsers that do not yet have support:

Page Grid Guide

To see how the page grid system (engine) works in conjunction with various types of implementations (templates), check out the page grid guide that includes various examples.