{"id":33310,"date":"2023-01-19T14:53:07","date_gmt":"2023-01-19T12:53:07","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=33310"},"modified":"2024-01-10T16:57:29","modified_gmt":"2024-01-10T14:57:29","slug":"identical-elements-nested-containers","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/","title":{"rendered":"Spacing identical elements in a container with nested containers"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>When there are several evenly spaced identical elements in a container there can be issues with responsive design. Elements may not line up as you would like for different screen widths.<\/p>\n\n\n\n<p>Normally, creators would have to customize designs for these differing screen sizes, but with this trick you can drastically cut down the amount of customization needed.&nbsp;<\/p>\n\n\n\n<p>In this article on <a href=\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\">spacing identical elements in a container<\/a>, we demonstrate best practices using widgets. But in this case we want to add an extra design element, a divider, which means we won\u2019t be able to use an icon box. Instead we\u2019ll be using nested containers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Spacing the items in the container<\/h2>\n\n\n\n<p>We\u2019ll be using these different properties for this exercise:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Justify content<\/li>\n\n\n\n<li>Container width<\/li>\n\n\n\n<li>Element gap<\/li>\n\n\n\n<li>Wrap<\/li>\n\n\n\n<li>Element size<\/li>\n\n\n\n<li>Manipulating viewport width<\/li>\n<\/ul>\n\n\n\n<p>We\u2019ll start, as usual, with the desktop design. Instead of adding four icon box widgets we\u2019ll add four nested containers, each of which contains four nested containers. In addition, instead of using an icon we\u2019ll use an image.<\/p>\n\n\n\n<p>In this article we\u2019ll refer to the largest container as the outer container and the four containers inside the outer container as the middle containers. The containers actually holding the content will be referred to as the interior containers.&nbsp;<\/p>\n\n\n\n<p class=\"callout-yellow\">Note: Building the page with these nested containers should not lower the page speed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"307\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-1024x307.png\" alt=\"An outer container holding four nested containers. Each nested container holds four nested containers.\" class=\"wp-image-33312\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-1024x307.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-300x90.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-768x230.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png 1231w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The outer container holds four nested containers. Each nested container holds four nested containers.<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the <strong>Layout <\/strong>tab of the outermost container, we\u2019ll set the elements so they display in a row with <strong>Justify Content<\/strong> set to <strong>space between<\/strong>, which will create even space between the middle containers.<br><img decoding=\"async\" width=\"340\" height=\"313\" class=\"wp-image-33314\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Second-screenshot.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Second-screenshot.png 391w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Second-screenshot-300x276.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>In the <strong>Layout <\/strong>tab of the middle containers, we\u2019ll set the elements so they display in a column with <strong>Justify Content<\/strong> set to <strong>space between<\/strong>, which will create even space between the containers.\u00a0<br><img decoding=\"async\" width=\"340\" height=\"168\" class=\"wp-image-33315\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/screenshot-2-layout-tab-middle-container-marked-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/screenshot-2-layout-tab-middle-container-marked-1.png 307w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/screenshot-2-layout-tab-middle-container-marked-1-300x149.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>Now we\u2019ll add an element gap that will ensure the elements maintain space between each other. In theory, setting <strong>Justify Content<\/strong> to Space Between will maintain this space, there are edge cases where this doesn\u2019t work. So we\u2019ll set Element Gap to 5% (this will vary with your design but will generally range from 1-9%).\u00a0<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"619\" class=\"wp-image-33316\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1.5-element-gap-marked.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1.5-element-gap-marked.png 309w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1.5-element-gap-marked-165x300.png 165w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>Next we\u2019ll define the middle containers\u2019 width. In this exercise, setting a specific width isn\u2019t strictly necessary because all the containers are identical, but this is a rare circumstance in real web design. So we\u2019ll go to the Advanced tab and set a custom width of 20% for each middle container.<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"247\" class=\"wp-image-33318\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/screenshot-3-layout-continer-width-marked.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/screenshot-3-layout-continer-width-marked.png 306w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/screenshot-3-layout-continer-width-marked-300x218.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/>\u00a0<br>Pro tip: To save time, after editing the first widge, right-click on the upper-right corner of the container. Then select <strong>Copy <\/strong>from the dropdown. Right-click on the upper-right corner of another container and select <strong>Paste Style<\/strong> from the dropdown. The second container will copy the settings, such as container width, from the first container.<\/li>\n<\/ol>\n\n\n\n<p>Now we\u2019re ready to customize the design for responsive mode.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enter responsive mode.<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"293\" class=\"wp-image-33319\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Enter-responsive-mode.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Enter-responsive-mode.png 393w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Enter-responsive-mode-300x259.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>Select tablet.<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"306\" class=\"wp-image-33320\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Choose-tablet.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Choose-tablet.png 513w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Choose-tablet-300x270.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>While we can see all four elements on the screen, a two column design would probably look better on a tablet. In order to divide the middle containers into two columns we\u2019ll set the outer container to Wrap.&nbsp;<\/li>\n\n\n\n<li>Set <strong>Justify Content<\/strong> to <strong>Center<\/strong>. This will prevent the elements from spreading out too much on widescreen tablets.<\/li>\n\n\n\n<li>Switch the<strong> Gap between elements<\/strong> to PX (pixels) and change the setting to 55px. We\u2019ve found that in tablets and mobile devices pixels work best with <strong>Gap between elements<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"657\" class=\"wp-image-33321\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/outer-container-settings-tablet-marked.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/outer-container-settings-tablet-marked.png 312w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/outer-container-settings-tablet-marked-155x300.png 155w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>Set the width for each middle container to 40% (when dividing into columns, we usually choose a percentage that adds up to a little less than 100%).<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"318\" class=\"wp-image-33323\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Width-40-percent.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Width-40-percent.png 386w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Width-40-percent-300x281.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>Enter responsive mode.<\/li>\n\n\n\n<li>Select Mobile.<br><img loading=\"lazy\" decoding=\"async\" width=\"139\" height=\"53\" class=\"wp-image-33324\" style=\"width: 139px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/select-mobile.png\" alt=\"\"><\/li>\n\n\n\n<li>Go to the Advanced tab of the middle containers and set the size to Grow. This will ensure that these containers will take up optimal space no matter what the width of the visitor\u2019s mobile device.<br><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"516\" class=\"wp-image-33326\" style=\"width: 340px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/advanced-tab-grow-marked-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/advanced-tab-grow-marked-1.png 309w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/advanced-tab-grow-marked-1-198x300.png 198w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/li>\n\n\n\n<li>Use the viewport handles to check the layout and make any necessary adjustments to the elements.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"442\" height=\"765\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Viewport-Handles.png\" alt=\"the container on a standard mobile device\" class=\"wp-image-33327\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Viewport-Handles.png 442w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Viewport-Handles-173x300.png 173w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><figcaption class=\"wp-element-caption\">The site on a standard mobile device.<\/figcaption><\/figure>\n\n\n\n<p>In most cases the layout should work for mobile devices, even wide screen mobile devices. This will save creators from having to design for additional custom breakpoints.\u00a0\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"743\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-widescreen-mobile.png\" alt=\"The site as it appears on a widescreen mobile device.\" class=\"wp-image-33328\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-widescreen-mobile.png 669w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-widescreen-mobile-270x300.png 270w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><figcaption class=\"wp-element-caption\">The site as it appears on a widescreen mobile device.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"821\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-tablet-.png\" alt=\"The site as it appears on a tablet.\" class=\"wp-image-33330\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-tablet-.png 1001w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-tablet--300x246.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/site-on-a-tablet--768x630.png 768w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><figcaption class=\"wp-element-caption\">The site as it appears on a tablet.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p>For more insights, check out our article on <a href=\"https:\/\/elementor.com\/help\/container-element\/\">learning about Flexbox Containers<\/a>.&nbsp;To get the most out of<strong> Elementor,<\/strong> check out the <a href=\"https:\/\/elementor.com\/academy\/\">Elementor Academy<\/a> and our <a href=\"https:\/\/www.youtube.com\/c\/Elementor\">YouTube channel<\/a> for helpful learning resources. If you come across any issues or need help, please contact our <a href=\"https:\/\/elementor.com\/support\/\">Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction When there are several evenly spaced identical elements in a container there can be issues with responsive design. Elements may not line up as you would like for different screen widths. Normally, creators would have to customize designs for these differing screen sizes, but with this trick you can drastically cut down the amount [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb05a8c1bbd17e021f650"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-33310","post","type-post","status-publish","format-standard","hentry","category-flexbox-containers"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Spacing identical elements in a container with nested containers | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Spacing identical elements in a container with nested containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spacing identical elements in a container with nested containers | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Spacing identical elements in a container with nested containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-19T12:53:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T14:57:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1231\" \/>\n\t<meta property=\"og:image:height\" content=\"369\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Spacing identical elements in a container with nested containers\",\"datePublished\":\"2023-01-19T12:53:07+00:00\",\"dateModified\":\"2024-01-10T14:57:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\"},\"wordCount\":776,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-1024x307.png\",\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\",\"url\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\",\"name\":\"Spacing identical elements in a container with nested containers | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-1024x307.png\",\"datePublished\":\"2023-01-19T12:53:07+00:00\",\"dateModified\":\"2024-01-10T14:57:29+00:00\",\"description\":\"Learn everything about Spacing identical elements in a container with nested containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png\",\"width\":1231,\"height\":369,\"caption\":\"The outer container holds four nested containers. Each nested container holds four nested containers.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Layout\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Flexbox containers\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Spacing identical elements in a container with nested containers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spacing identical elements in a container with nested containers | Elementor","description":"Learn everything about Spacing identical elements in a container with nested containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/","og_locale":"en_US","og_type":"article","og_title":"Spacing identical elements in a container with nested containers | Elementor","og_description":"Learn everything about Spacing identical elements in a container with nested containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/","og_site_name":"Help","article_published_time":"2023-01-19T12:53:07+00:00","article_modified_time":"2024-01-10T14:57:29+00:00","og_image":[{"width":1231,"height":369,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Spacing identical elements in a container with nested containers","datePublished":"2023-01-19T12:53:07+00:00","dateModified":"2024-01-10T14:57:29+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/"},"wordCount":776,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-1024x307.png","articleSection":["Flexbox containers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/","url":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/","name":"Spacing identical elements in a container with nested containers | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked-1024x307.png","datePublished":"2023-01-19T12:53:07+00:00","dateModified":"2024-01-10T14:57:29+00:00","description":"Learn everything about Spacing identical elements in a container with nested containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/identical-elements-nested-containers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/Screenshot-1-outlining-containers-marked.png","width":1231,"height":369,"caption":"The outer container holds four nested containers. Each nested container holds four nested containers."},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Layout","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/"},{"@type":"ListItem","position":4,"name":"Flexbox containers","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/"},{"@type":"ListItem","position":5,"name":"Spacing identical elements in a container with nested containers"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=33310"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33310\/revisions"}],"predecessor-version":[{"id":33331,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33310\/revisions\/33331"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=33310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=33310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=33310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}