Webpress

Styling & Design

Layout — flexbox & grid

Arrange elements into rows, columns, and grids with the Layout sector — align them, space them with gaps, and control how each item behaves.

Last updated 2026-06-29

Layout is how multiple elements are arranged relative to each other — side by side in a row, stacked in a column, or placed in a grid. This is the difference between a pile of elements and a designed page. The controls live in the Layout sector of the Customize tab.

Many blocks and templates already use good layouts. You'll mostly adjust existing layouts (change alignment, spacing, or column count) rather than build them from scratch.

Display: the starting choice

The Display control decides how a container arranges its children:

  • Block — children stack vertically, each on its own line (the default).
  • Flex — children line up in a row or a column that you can align and space precisely. This is the workhorse for most layouts.
  • Grid — children are placed into a grid of rows and columns, ideal for galleries, feature cards, and anything tabular.

Set a container to Flex or Grid and the relevant controls below appear.

Flexbox — flexible rows and columns

A flex container lays its children out in one direction and gives you fine control over alignment and spacing.

ControlWhat it does
DirectionRow (left-to-right) or column (top-to-bottom), and their reverses.
JustifyHow items are distributed along the main direction — packed at the start/center/end, or spread apart with space between them.
AlignHow items line up across the other direction — top, center, bottom, or stretched.
WrapWhether items wrap onto a new line when they run out of room.
GapThe space between items (see below).

There's also a handy 9-dot alignment grid that sets justify and align together — click the spot where you want your items to sit.

Flex in plain English: "put these in a row (or column), and let me decide how they're spaced and aligned." It's how you build navigation bars, button groups, and side-by-side text-and-image sections.

Grid — rows and columns

A grid container arranges children into a true grid. You define columns (and optionally rows) as tracks, and items flow into the cells.

  • Use the columns control to add, remove, and size columns. Sizes can be fixed (200px), flexible (1fr = one share of the leftover space), or automatic.
  • A 3-equal-column grid (1fr 1fr 1fr) is perfect for a row of three feature cards.
  • Gap sets the space between cells.

Grids automatically keep everything aligned into neat rows and columns — much tidier than nudging items by hand.

Some advanced grid tools — like the visual named-areas painter for drawing complex layouts — are available on higher plans. The everyday column/row and gap controls are always available.

Gap — spacing between items

Gap is the consistent space between children in a flex or grid container. It's better than adding margins to each item because it spaces everything evenly and never adds extra space on the outer edges. You can set a single gap, or separate row and column gaps.

When a container is selected, you can also drag its gap handles right on the canvas to adjust spacing visually.

Controlling a single item

When you select a child inside a flex or grid container, a Position in parent group appears so you can override how that one item behaves:

  • Flex grow / shrink / basis — let an item take more (or less) of the available space. Setting one item to grow makes it fill the leftover room.
  • Align self — align just this item differently from its siblings.
  • Grid column / row — make a grid item span multiple columns or rows (e.g. a featured card that's twice as wide).

A worked example: three cards in a row

  1. Select the container holding your cards.
  2. Set Display to Grid, with 3 equal columns (1fr 1fr 1fr).
  3. Set a comfortable Gap (e.g. 24px).
  4. Switch to Mobile and change the grid to 1 column so the cards stack on phones — see Responsive design.

Where to go next