Adding a Nested Layout

You can put a row inside a column to split that column again, such as two icons side by side above a heading. Use it when one column needs a finer grid than the row around it. The example adds a row of two icons to the middle column of a three-column row. For your first row, start with Rows and columns.

Add a nested layout

1. Add a section with a row and columns.
2. Hover a column and click + on its Column bar.
3. In the element picker, select Row from the Layout tab.
4. The nested row appears inside the column with columns of its own.
5. Add elements to the nested columns as usual, for example an Icon in each.
6. Click Save on the toolbar to store the page.

New elements land at the top of their column, so the nested row sits above the column's text.

What you see

The pencil and the star sit side by side at the top of the middle column, above the Design heading. The outer columns are unchanged. In the editor, the nested row has its own Row and Column bars, inside those of the outer row.

Section
  Row (1/3 + 1/3 + 1/3)
    Column
      Text: Discovery
    Column
      Row (nested, 1/2 + 1/2)
        Column
          Icon: pencil
        Column
          Icon: star
      Text: Design
    Column
      Text: Delivery

Set up your nested layout

A nested row has the same grid icon and settings as any row; see Rows and columns. Its widths are shares of the parent column, not of the page. A half-width column that holds a nested row of two halves gives you two quarter-width areas.

On screens narrower than 768 pixels, nested columns stack just like the outer ones. Give the nested row a phone layout with Add screen size if the icons should stay side by side.

Maximum nesting depth

Rows nest three levels deep: a row, a row in one of its columns, and one more row inside that. A fourth level is refused. The same limit applies to each container type on its own, such as Tabs inside Tabs. One type never counts towards another type's limit.

Two levels cover most layouts. Every extra level adds control bars to aim past and narrows the space for content.

Common nesting patterns

Pattern	How it is built
Feature grid	A row of three columns, each with a nested row: an icon beside its text
Sidebar blocks	A 2/3 + 1/3 row whose narrow column holds nested rows, one per block
Team members	A row of two columns, each with a nested 1/3 + 2/3 row: a portrait beside the bio

If you don't see it

• A warning says you can only nest rows 3 levels deep. The column already sits inside two nested rows, so "Element cannot be added". Add the row to a column one level up, or use a preset with more columns on the outer row.
• The nested row sits above the text instead of below it. New elements land at the top of their column. Open More on the nested row's bar and choose Move Down.
• The icons stack on a phone. Nested columns stack below 768 pixels, like all columns. Click the nested row's grid icon, then Add screen size, and pick 1/2 + 1/2 for Extra small (< 576px).

What's next?

• Positioned layers: overlap elements in ways the grid cannot.
• Rows and columns: column presets and a layout per screen size.
• Tabs: stack panels of content in one place instead of side by side.

Something wrong or missing on this page? Report it or edit the page.