Experimental auto-centering css grid helper → Demo

Usage

import Monogrid from 'monogrid'

const grid = new Monogrid(document.querySelector('.monogrid'))

// center grid, re-center on resize
grid.observe()

// stop resize observer
grid.unobserve()

Details

css grid is used for laying out elements on a true grid with coherent column and row gutters. These grids often expect explicit column start positions, and for that reason, do not handle auto centering (unlike flex’s justify-content). Certain layouts are not possible: try centering a 5-column block on a 12-column css grid.

monogrid unlocks flex style auto centering for css grids. Each row width is measured, and if it does not match the parent grid width, the row will be nudged to the center.

API

instance = new Monogrid(element)

Initialize a monogrid instance with a display:grid dom element.

instance.render()

Measure each row and center those which do not fill the width of the grid.

instance.observe()

Boot up a ResizeObserver to re-center the grid on element resize.

instance.unobserve()

Stop observing the element.

Overrides

Override monogrid behavior on a per-element basis by explicitly setting grid-column-start. In the example below, the highlighted item has grid-column-start: 1 defined, so the row will not be centered and remain locked to the left.

¯\_(ツ)_/¯

Layouts unlocked by monogrid can definitely all be solved with flexbox or other methods.

Todo

• [ ] on('render') event