4.0Essential Grid 4.0 is here — see what’s new
Essential Grid
Download free
Buy now

Three layouts. One list.

Even rows, masonry columns or cobbles tiles. Pick the one that suits your content, then set columns and spacing for every screen size.

Get Essential Grid
Explore examples

The same eight examples, three layouts.

These are live Essential Grid grids on this page. Same content, same card design; only the layout setting changes.

Layout

Even

Every item gets the same shape, so rows line up like a catalogue. Products, team members and logos look calm and comparable.

Good for shops, teams and client logos

Even examples

Layout

Masonry

Every item keeps its own shape and the columns fill from the top. Portrait and landscape sit side by side, nothing is cropped.

Good for photography, blogs and social walls

Masonry examples

Layout

Cobbles

Tiles one, two or more cells wide or tall interlock without gaps, so your lead story or best project gets the space it deserves. Set the size per item, or a pattern that repeats.

Good for portfolios and magazine front pages

Cobbles examples

New in 4.0

In place from the first paint.

New grids arrive from the server as a CSS grid, every item in place from the first paint. Even, Masonry and Cobbles alike: nothing jumps while the page loads.

The 4.0 front end What’s new in 4.0

Fit every screen, every column.

Each grid keeps its own sizes, so the same list can be a wide wall on one page and a narrow column on another.

Columns per screen sizeSet how many columns show on wide desktops, laptops, tablets and phones.
Spacing and rowsChoose the gap between items and how many rows show before “Load more” or the next page.
Boxed, full width or full screenKeep the grid inside your content, stretch it across the window, or fill the screen.
Right to leftGrids can run from right to left for Arabic, Hebrew and other RTL languages.
Content below or on the imageCards show their text under the image or on it, set in the skin.
Columns follow the containerNew in 4.0: new grids count columns from the space they have, so a grid in a sidebar gets fewer columns than one across the page.

Grid Guides

What a good grid does Space is a design decision Small screens, strong grids

More of what Essential Grid does

Make every list worth a look.

Pick an example, import it in one click and make it yours.

Get Essential Grid
Explore examples