How to use stacks, cells and grids in Wix Studio Two
Updated: 6 hours ago
In the Studio Two editor, use a stack to keep related elements together as one unit, and use the section grid to divide a section into cells. Every section already has a section grid. When you need exact rows and columns in responsive units, switch a section or cell to a manual CSS grid.
Status: The sources describe the Studio Two editor as released in November 2026. A section grid holds at most 16 cells.
Before you start
You need a site open in the Studio Two editor, not the classic Studio editor.
For a manual CSS grid, work on the desktop breakpoint first.
Elements you add to an existing stack must be in the same section as that stack.
Step by step
Create a stack. Select one element, hold Shift and click the others. Click the More Actions icon on the action bar, hover over Stack and choose Vertically or Horizontally. You can also click the Stack icon that appears on the canvas when aligned elements sit close together.
Add, detach or unstack elements. To add an element, select it, Shift-click the stack, open More Actions and choose Add to Stack. To remove one, right-click it and select Detach from Stack. To dissolve the whole group, select the stack and click Unstack on the action bar.
Set the stack layout. Select the stack, open the Inspector and go to Design, then Layout. Switch between a horizontal and vertical stack, set Item spacing, and use Align items to position elements inside the stack. A horizontal stack also has a Direction setting.
Style the stack as a container. Select the stack and click the All design options icon on the action bar. In the Inspector you can set Borders, Corners, Shadow and Fill. Fill accepts a color, gradient, image or video, with adjustable opacity.
Choose a section grid layout. Select a section, open the Inspector, then go to Design and Layout. A blank section is a single cell, so pick a layout under Choose layout. With several cells, use the Change layout dropdown to pick Rows, Columns, Collage or Cards. Your elements stay in their cells.
Add, delete, split, merge and swap cells. Click Layout on the action bar and choose Right, Left, Top or Bottom under Add cell. To split a cell, select it and use Split horizontally or Split vertically. To merge or swap, click one cell, Shift-click a second and choose Merge or Swap on the action bar. To delete a cell, right-click it and select Delete.
Even out, flip and resize the grid. Under Adjust grid in the Inspector, use Equalize columns, Equalize rows, Flip columns or Flip rows. You can also drag the gridlines on the canvas. To control row heights yourself, set the Vertical spacing dropdown to Manual.
Switch to a manual CSS grid. Select the desktop breakpoint, then select a section or a single cell. In the Inspector, go to Design, then Layout, click Edit Manually next to CSS grid and confirm in the popup. A section replaces the whole section grid. A cell turns only its own layout into a CSS grid.
Size rows, columns and gaps. Click Columns / Rows to see the full list and enter a size and unit for each one, such as fr, Min/max or %. Set horizontal and vertical values next to Gaps, and click the unit to change it, for example from px to vw. Or click Customize grid on canvas on the action bar and drag the gridlines.
Add or remove rows and columns. In the Columns / Rows list, click the More actions icon next to a row or column. Choose an option such as Add column left, Add row below, Delete column or Delete row. On the canvas, drag from the left or top edge of the grid to add a gridline.
Place an element in a cell. Select the element, open the Inspector and go to Position. Click a cell under Location in grid cells. Hold Shift while clicking another cell to stretch the element across several cells.
Check each breakpoint. A manual CSS grid cascades down from desktop. Review and adjust the grid at the smaller breakpoints so the layout fits those screens too.
Good to know
You cannot turn a manual CSS grid back into a section grid. If you switch by mistake, click Undo at the top right of the editor straight away.
A section grid holds a maximum of 16 cells. After that, Add cell stops working. Split content across two sections or use a manual CSS grid.
Deleting a cell also deletes the elements inside it.
Merging works only for cells in the same row or column. Swapping works for any two cells.
If a section uses the Fit to screen responsive behavior, its vertical spacing is already set to manual.
You can't delete the last row or column of a grid.
Wix calls the default behavior automatic vertical spacing, the same idea as auto push in the Wix Editor: as content and screen size change, elements never overlap.
parnii note
Because a manual CSS grid cannot be reverted to a section grid, try it on a duplicate of the section or site first. Then check every breakpoint after you set the grid on desktop.
FAQ
How do I group elements in the Studio Two editor?
Shift-click the elements, open More Actions on the action bar, hover over Stack and choose Vertically or Horizontally. The elements then behave as one unit.
Why can't I add more cells to my section?
A section grid allows at most 16 cells. To go beyond that, split the content across two sections or edit the CSS grid manually and build the structure there.
Do I need a manual CSS grid to set my own row heights?
No. Set Vertical spacing to Manual in the section grid to control row heights. A manual CSS grid replaces the section grid and suits responsive units or structures the presets don't cover.
Sources
Part of our Wix Studio Two series (Studio 2). Last checked: 06 November 2026.
