--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/nesting' title: 'Adding a Nested Layout | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Put a row inside a column when one column needs a finer grid, up to three rows deep' tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Adding a Nested Layout' description: 'Put a row inside a column when one column needs a finer grid, up to three rows deep' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/nesting' articleSection: Layout - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/nesting' description: 'Put a row inside a column when one column needs a finer grid, up to three rows deep' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Layout](/hc/documentation/learn-dxpr-builder/layout/overview) # Adding a Nested Layout. Put a row inside a column when one column needs a finer grid, up to three rows deep Learn DXPR BuilderBuild pagesAdd contentLayout ## In this guide Related guides - [Positioned Layers](/hc/documentation/learn-dxpr-builder/layout/positioned-layers) - [Rows and Columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Tabs](/hc/documentation/learn-dxpr-builder/layout/tabs-element) 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](/hc/documentation/learn-dxpr-builder/layout/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. ```text 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](/hc/documentation/learn-dxpr-builder/layout/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](/hc/documentation/learn-dxpr-builder/layout/positioned-layers): overlap elements in ways the grid cannot. - [Rows and columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): column presets and a layout per screen size. - [Tabs](/hc/documentation/learn-dxpr-builder/layout/tabs-element): stack panels of content in one place instead of side by side.