Set how wide and tall a block is, pin it in place, arrange what is inside it as a stack or a grid, and wrap blocks in a new stack.
Updated 20 Oct 2026
Click any block on your page and the panel on the right shows its settings. Many of these can also be changed by dragging the bars on the block itself: see Move and resize blocks on the page. Three sections there decide where a block sits and how big it is: Size, Position and Layout. This article explains each one.
Each section shows only what is set on the block. The + on a section's header adds a setting, the - next to it clears the whole section, and the x at the end of a row removes that one row. The full story is in Style a block.
Width and Height each have a number and a menu next to it. The menu picks what the number means:
| Menu choice | What it does |
|---|---|
| Fixed | The block is exactly this many pixels. |
| Relative | The block takes this share of its parent, as a percentage. |
| Fill | The block stretches to take the room its parent gives it. The box reads 1fr and cannot be typed in. |
| Fit content | The block is as big as what is inside it. The box is greyed out. |
| Viewport (height only) | The block is as tall as the visitor's screen. |
Changing the menu keeps the number you had. Nothing is reset.
Fill is greyed out for width when the block's position is Absolute, because an absolute block has nothing to fill.
To set a smallest or largest size, click the + on the Size header and pick Max width, Min width, Max height or Min height. Each one becomes its own row. Click the x at the end of the row to remove it again.
Aspect ratio and Box sizing are under Advanced in the same + menu.
When a block sits inside a grid, Size also shows Grid span, with a Columns and a Rows number. Use the minus and plus buttons, or type a number. 1 is one cell, 2 reaches across two cells, and the number cannot go below 1. If the span was set in a way these boxes cannot show, such as 1 / 3, the box is greyed out and reads as text. That value is then shown as a row in the Layout section, where you can edit it as text or remove it with its x.
Grid span is saved in the block's style. Other blocks that use the same style share it, so they all stretch together. To change just one, give it a style of its own first.
Relative is the normal setting: the block sits in the flow of the page.
Absolute takes the block out of the flow and pins it to its parent. Four numbers appear around a small box: top, left, right and bottom. A dark bar on a side of the box means that side is pinned and its number is in use. A faint bar means that side is free; click it to pin that side, or click a dark bar to free it.
Place in cell shows when the block is inside a grid. Nine dots stand for the nine spots in the block's cell: top, middle or bottom, and left, middle or right. Click a dot to put the block there. Two menus next to the dots, Vertical anchor and Horizontal anchor, set the same thing one direction at a time. It does not show for an Absolute block, and a block that fills its whole cell in both directions has nowhere to move, so it shows Grid span only.
Like Grid span, the spot is saved in the block's style, so other blocks that use the same style move to the same spot together.
Z index decides which block sits in front when two overlap. Use the minus and plus buttons, or type a number. Higher numbers come to the front.
Layout is for blocks that hold other blocks, such as a section or a card. Choose Stack or Grid.
Switching from Stack to Grid and back keeps the stack settings.
Above the settings, under the Agent and Style tabs, is a row of eight buttons: Align left, Align horizontally, Align right, Align top, Align vertically, Align bottom, Distribute horizontally and Distribute vertically.
A click does not move the block you selected. It changes the parent, the box that holds it, by setting the same kind of choice you would find in the parent's Layout section, such as Distribute or Align. So the blocks next to yours move too. The change is made for the screen size you are editing, and it is one step in Undo.
If the parent's direction is Row reverse or Column reverse, the bar follows what you see: Align left puts the blocks at the left edge, even though the reversed row starts on the right.
Distribute spreads the blocks along the direction of the stack, with space between them. It is greyed out on a grid, and it only works along the stack's own direction: use Distribute horizontally for a row and Distribute vertically for a column.
The bar is greyed out, not hidden, when there is nothing to change. Hover over it to read why. This happens when the block is at the top of the page, is Absolute or Fixed, sits inside a box that is not a stack or a grid, or when the selected blocks have different parents.
The parent's layout is saved in the parent's style. If other boxes on your site use that same style, they change too. Layers that share a style always move together.
Hovering over a button also shows a keyboard shortcut, such as Alt + A. The shortcut is only a label for now and the keys do nothing, so use the buttons.
The selected blocks move inside a new block named Stack. It is a vertical stack with its items centred, a gap of 10 and no padding, and it fills the width of its parent.
To undo a wrapper later, select the stack, right-click and choose Remove wrapper, or press Ctrl + Backspace or Ctrl + Delete (Cmd + Backspace on a Mac). The blocks inside stay exactly where they were and the wrapper is removed.
Right-click a block in Layers and choose Hide on this screen. The block is hidden only on the screen size you are editing, for example Tablet. A crossed-out eye appears at the end of its row. Choose Show on this screen to bring it back.
What do the + and - on a section header do? The + adds a setting to that section. The - clears every setting in that section. On Tablet and Phone, it clears only what that screen has set for itself, and the Desktop values stay. On Desktop, it clears the section on every screen size.
My block has a size the menu does not offer, such as 50vw. What happens? The box shows the value as it is and the menu reads Custom. Pick any menu choice to replace it.
Where is the Delete shortcut? Delete or Backspace removes the selected block. Ctrl + Backspace now removes a wrapper instead.