Space is not what is left over. It is how people see that two things belong together, and that two others do not. In a grid, the space between the items decides whether the grid reads as one thing or as many.
Essential Grid sets that space with one value for the whole grid: Space between items, in pixels. Try its four presets on the grid below.
Four presets, one grid
-
Afternoon lightLiving room
-
Tile and brassGreen kitchen
-
Lime plasterLinen bedroom
-
Oak and velvetReading nook
-
TravertineStone bath
-
Shared lunchLong table
The same six cards at every value. The buttons set Space between items, as its presets do in the grid editor.
What each preset does
| Preset | Space | What it does | Good for |
|---|---|---|---|
| No gaps | 0 px | The items touch: the grid reads as one surface. | Photo walls, logos, mosaics |
| Tight | 10 px | The items are separate, but close: a dense grid that still reads as one. | Galleries with many items |
| Normal | 20 px | Each card stands on its own, and the grid still holds together. | Most grids: a good start |
| Airy | 30 px | Every item gets room: calm and editorial. | A few large items |
The presets are a starting point, not a rule. Type your own value when a grid needs it.
One value, held everywhere
The strength of one value is that it repeats. Every gap is the same, so the eye stops measuring and starts reading. A grid with gaps of three sizes looks undecided, even when nobody can say why.
Keep the gap in step with the rest of the page. A site whose spacing follows a scale (4, 8, 12, 16, 20, 24, 32 …) looks most at home with a grid gap from the same scale: 16, 20 or 24 rather than 18.
Between the items, and around the grid
Two settings do two jobs:
- Space between items is the gap inside the grid, between neighbouring items.
- Space around the grid is the room between the grid and what surrounds it: one value for all four sides, or one per side once you unlink them.
Use the space around the grid when the grid sits on a coloured Background, so its items do not touch the edge of the colour. On a page that already gives the grid room, leave it at 0 and let the page do it.
Space inside the cards
The gap between the items works together with the space inside each card: the padding around the card’s text, set in its skin. When a card’s text runs close to its edge, a larger gap will not fix it; give the text room in the skin first. When the space inside the cards is much larger than the gap between them, neighbouring cards blur into each other; when the gap is much larger, the grid falls apart. Keep the two in proportion.
On a phone
On a phone a grid has one or two columns, and the gap is most of what stands between one item and the next. A gap that looks airy on a desktop can look lost between full-width cards. Check the grid at phone width with the preview’s device switch: Small screens, strong grids shows how.
Where you set it
The four presets are at the top of the grid editor’s Layout page: choose the chip Space between items in the Presets, then No gaps, Tight, Normal or Airy.
The value itself is in the row Spacing and background: Space between items, a number in pixels, for any value the presets do not have. Below it, Space around the grid has one value for all four sides; unlink it to set each side on its own. Background is the colour behind the items.
Spacing in the quick bar above the preview has both values and the four presets, from whichever page you are on.
Good to know
- A layout preset keeps the space between items as it is; the space has presets of its own, under the chip Space between items.
- In new Essential Grid 4.0 grids the gap is part of the grid from the first paint, so nothing moves when the grid starts.
Read on
- In the manual: Layouts: Even, Masonry and Cobbles, its part “Spacing and background”
- The guide before: What a good grid does
- The feature: Three layouts, one list