The Layout page of the grid editor decides how a grid lays out its items: one of three layouts, the grid’s width, and the number of columns on every screen size. Its layout presets set the width, the layout, the columns and the image ratio in one click; the space between items keeps its value and has presets of its own (The grid editor explains presets).
The three layouts
| Layout | How it lays out the items | Good for |
|---|---|---|
| Even | Every item of a row has the same size: the columns and an image ratio decide it. | Blog cards, products, team members |
| Masonry | Every item has the column’s width and the height of its own image. | Photos, posts with images of different shapes |
| Cobbles | A mosaic: some items span several columns or rows. | Portfolios, magazine front pages |
Choose one of the three tiles under Layout; the preview changes at once.
Width
| Width | What it does |
|---|---|
| Content width | The grid stays inside the page’s content column. |
| Full width | The grid goes from edge to edge of the window. |
| Full screen | The grid is one window high and uses the Even layout; visitors turn its pages. Leave room for names elements, such as a fixed header, whose height it leaves free. |
Width, layout and columns
Open the row Width, layout and columns for the details of the layout:
| Setting | What it does |
|---|---|
| Image ratio | Width : height of the items’ images in Even and Cobbles grids, such as 4 : 3 or 1 : 1. A Masonry grid uses each image’s own ratio (Auto). |
| Content below pushes the row | For an Even grid whose skin shows content below the media: on, that content pushes the page below the grid down; off, it may overlap it. |
| Right to left | Lays out and orders the items from right to left. |
| Columns | The number of columns on each of the eight breakpoints (below). |
Columns on every screen size
Columns is one row of eight devices, from Desktop XL to Mobile. Click a device and type its number of columns. A device that shows “=3” follows the device above it: change the number of a device, and the devices that followed it change with it.
Edit breakpoints opens the table behind the row. With Breakpoints on Standard, it lists each Device (Desktop XL, Desktop Large, Desktop Medium, Desktop Small, Tablet Landscape, Tablet, Mobile Landscape, Mobile) with its Items per row, at the standard widths. Custom adds the columns Height while loading, From window width (px) and Text height (Masonry) for each device, and lets rows of items have column counts of their own.
Below the table, Columns follow decides what a device’s width is measured against: Container, the width of the grid itself, so a grid in a sidebar or a column takes the columns its own width calls for, or Window, the width of the window, as until 4.0. A new grid starts on Container; a grid made before 4.0 keeps Window. The row needs the new front end: on a grid that runs on the classic one it is locked.
To check a breakpoint, switch the preview to it with the device switch above the preview: the grid shows that device’s columns. Columns on … in the quick bar (“Columns on Desktop L 4”) changes the number for the device shown.
Cobbles sizes
A Cobbles grid gets the section Cobbles sizes:
- Item sizes: Repeating pattern gives the items sizes in turn, from a pattern of cells such as 2:2 (two columns wide, two rows high) and 1:1; add and remove cells, or pick a Mosaic pattern preset such as Big first or Wide and big. Per item uses the size set on each item (its cog in the preview).
- Switch to Even on: from which screen size down the grid becomes an Even grid, or Keep Cobbles Always.
Spacing and background
The row Spacing and background holds:
- Space between items, in pixels; Spacing in the quick bar sets it too.
- Space around the grid: one value for all four sides, or one per side once you unlink them.
- Background: the colour behind the items.
- Hide blank items below: for custom grids with blank items, the screen size below which they are left out (Custom grids).
On the page
The same blog posts in the three layouts, on a desktop and on a phone:
Good to know
- New 4.0 grids arrive from the server as a CSS grid, every item in its place from the first paint, so the page does not jump while the grid loads. Even, Masonry and Cobbles alike.
- With Columns follow on Container, a grid counts its columns from its own width on the page instead of the window, so a grid in a narrow sidebar gets the columns of its width. Grids made before 4.0 follow the window, so they keep their look.
- How many items show at first, and how visitors see more, is set on the Navigation page: Pagination, Load more and placement.