What a good grid does

A good grid does three things. It shows what belongs together, it lets the eye move in an order, and it stays out of the way of the content. The layout is the first decision that serves all three.

Essential Grid has three layouts: Even, Masonry and Cobbles. Below, the same eight photos run through each of them: landscape, portrait and square pictures, always in the same order. Only the layout changes.

Even: the same cell for everything

In an Even grid every item of a row has the same size. The columns and the Image ratio decide it: here 4 : 3, so the portrait and square photos are cropped to the shape of the landscapes. Rows line up like a catalogue, and items are easy to compare.

Even fits when the items are of one kind: products, team members, blog cards, client logos. It also fits when you do not choose every picture yourself: one cell shape keeps a grid calm, whatever comes in.

Masonry: every photo keeps its shape

In a Masonry grid every item has the column’s width and the height of its own image (its Image ratio on Auto). Nothing is cropped: the portrait photos stand tall, the landscapes lie flat, and each column fills from the top.

Masonry fits photography and posts whose images have different shapes, where the picture is the point. It reads less like a table and more like a wall, so give it a strong first item and let the rest follow.

Cobbles: some items take more room

A Cobbles grid is a mosaic: some items span two columns, two rows or both. This one uses the repeating pattern Big second: one cell, two by two cells, two by one, one, one, and again from the start, so the second and the seventh photo take the most room. Eight photos fill four rows exactly.

Cobbles fits when one item matters more than the rest: a lead story, a featured project, a new collection. It works best with a few strong pictures; with many small, busy ones a mosaic turns into noise.

Which layout, then?

Your content	Start with
Items of one kind, to compare	Even
Pictures of different shapes	Masonry
One or two items that lead	Cobbles

When in doubt, start with Even. It is the easiest to read and to keep consistent, and you can change your mind later: the layout is one setting, and your items, skin and filters stay as they are.

Where you set it

Open the grid in the grid editor and go to the Layout page. The three tiles under Layout choose Even, Masonry or Cobbles; the preview changes at once.

The Presets at the top of the page set several settings in one click. With the chip Layout chosen, their tiles set the width, the layout, the columns and the image ratio together, such as Cards · 3 columns or Cards · 4 columns; the space between items keeps its value. The menu beside Presets says how close the grid is to a preset (Custom once you changed something) and can save the current settings as a preset of your own.

All presets opens every preset of the page, with Masonry · 3 columns, Mosaic · 3 columns and the other layouts among them.

For an Even or a Cobbles grid, Image ratio in the row Width, layout and columns sets the shape of the cells. A Masonry grid uses each image’s own ratio while its Image ratio is on Auto.

A Cobbles grid gets the section Cobbles sizes in the same row. Switch to Even on comes first: from which screen size down the mosaic becomes an Even grid, or Keep Cobbles Always. Then Item sizes: Repeating pattern gives the items their sizes in turn, from a pattern of cells from 1:1 up to 4:4 (2:2 is two columns wide and two rows high); Per item uses the size you set on each item instead.

The Mosaic pattern presets fill the pattern in for you: choose the chip Mosaic pattern in the Presets, then Sizes per item, Big first, Big second or Wide and big.

Good to know

• New Essential Grid 4.0 grids arrive with every item in its place from the first paint, in all three layouts: the page does not jump while the grid loads.
• Every layout has its own number of columns for each screen size. More in Small screens, strong grids.
• After the layout, space is the next decision: Space is a design decision.

Read on

• In the manual: Layouts: Even, Masonry and Cobbles
• The feature: Three layouts, one list
• Examples by layout: Even, Masonry, Cobbles