Grid Guides
How to design grids that work: layouts, space, small screens, motion, filters, colour, contrast, headlines and type. Each guide has a live Essential Grid 4.0 grid and the settings that make it.
-
What a good grid does
The same eight photos in Even, Masonry and Cobbles, live on this page: what each layout does with your content, and when each one fits. -
Space is a design decision
Space tells people what belongs together. One value sets it for a whole grid: try the four presets on the same six cards and see what each one does. -
Small screens, strong grids
Many visitors see your grid on a phone first. Columns for every screen size, a grid that counts its own width, and cards that work without hover. -
Build your first editorial grid
A magazine front page from your posts: Masonry columns, one story that leads, quote cards between the photos and a Load more button. Live, step by step. -
Give your grid a little motion
Motion tells people what just happened: the items arrived, this card answers your pointer, the list changed. Eight entrances to try, and how to keep motion short and calm. -
Timing is a design material
How long, how late, in what order. The same hover feels quick and helpful at one timing and slow and in the way at another: try both on two live grids. -
Make changing layouts feel natural
When a visitor filters, the grid changes in front of them. Counts, filters that stay in place and a calm change effect keep that change easy to follow. -
A colour system for your grid
A quiet base, one accent and words beside every colour. The same six tiles in a light and a dark skin show how few colours a grid needs. -
Contrast beyond black and white
White text on a snowy photo, a grey count on a white button, a focus ring nobody sees. The contrast checks every grid needs, measured on two live grids. -
Better labels, better libraries
A big grid is a library, and a library is only as good as its labels. Filter names people use, counts, two questions instead of one long row, and a search that finds. -
The art of the useful headline
People scan a grid in seconds, and the titles are what they read. Titles that say where a card leads, excerpts that add something and one line of meta. -
Type scales without the maths
One font, two weights, three sizes. A type scale for your grid's cards is a short list you reuse, and you can set it up without a single formula.