{"id":33004,"date":"2023-01-08T10:44:44","date_gmt":"2023-01-08T08:44:44","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=33004"},"modified":"2024-01-10T16:57:42","modified_gmt":"2024-01-10T14:57:42","slug":"spacing-identical-elements-in-a-container","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/","title":{"rendered":"Spacing identical elements in a container"},"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>Using this method, you\u2019ll only need to customize one mobile breakpoint instead of several, in most cases.&nbsp;<\/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 four 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>Widget width<\/li>\n\n\n\n<li>Element gap<\/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. We\u2019ll be working with a container and four nested elements. In this case, we\u2019re using icon box widgets but it could also be nested containers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"241\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-1024x241.png\" alt=\"A container with four nested elements\" class=\"wp-image-33005\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-1024x241.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-300x71.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-768x181.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png 1364w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">We&#8217;ll start with a container around four nested elements.<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the <strong>Layout <\/strong>tab of the 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 widgets.<br><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-10.png\"><img decoding=\"async\" width=\"312\" height=\"287\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-10.png\" alt=\"The Edit panel for a container.\" class=\"wp-image-33007\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-10.png 312w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-10-300x276.png 300w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><figcaption class=\"wp-element-caption\">Set the Direction to row and Justify Content to space between.<\/figcaption><\/figure><br><\/li><li>Next we\u2019ll define the widgets\u2019 width in the <strong>Advanced <\/strong>tab. In this exercise, setting a widget width isn\u2019t strictly necessary because all the widgets 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 15% for each widget.\u00a0(Pro tip: To save time, after editing the first widget, right-click on the upper-right corner of the widget. Then select <strong>Copy <\/strong>from the dropdown. Right-click on the upper-right corner of another widget and select <strong>Paste Style<\/strong> from the dropdown. The second widget will copy the settings, such as widget width, from the first widget.)<br><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-11.png\"><img decoding=\"async\" width=\"312\" height=\"379\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-11.png\" alt=\"The Advanced tab for a container\" class=\"wp-image-33008\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-11.png 312w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-11-247x300.png 247w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><figcaption class=\"wp-element-caption\">Set the width to 15%.<\/figcaption><\/figure><br><\/li><li>Go back to the <strong>Layout <\/strong>tab and 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%).&nbsp;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-12.png\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"499\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-12.png\" alt=\"The Layout tab of a container\" class=\"wp-image-33009\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-12.png 312w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-12-188x300.png 188w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><figcaption class=\"wp-element-caption\">Set the Gap between elements to 5%<\/figcaption><\/figure>\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><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"311\" height=\"271\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-13.png\" alt=\"The Responsive mode icon\" class=\"wp-image-33010\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-13.png 311w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-13-300x261.png 300w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/a><figcaption class=\"wp-element-caption\">Click this icon to enter responsive mode.<\/figcaption><\/figure><br><\/li><li>Select tablet<br><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"370\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-14.png\" alt=\"The tablet icon\" class=\"wp-image-33012\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-14.png 409w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-14-300x271.png 300w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><figcaption class=\"wp-element-caption\">Select the tablet icon to view the page as it would appear on a tablet.<\/figcaption><\/figure><br><\/li><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 these widgets into two columns we\u2019ll set the column width for each widget to 40% (when dividing into columns, we usually choose a percentage that adds up to a little less than 100%). This is done in the <strong>Advanced <\/strong>tab of each individual widget. (Note: The elements may not yet appear in two columns. We\u2019ll adjust the <strong>Wrap <\/strong>setting later which will produce the column break.)<br><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"287\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-15.png\" alt=\"The Advanced tab of a widget.\" class=\"wp-image-33013\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-15.png 308w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-15-300x280.png 300w\" sizes=\"(max-width: 308px) 100vw, 308px\" \/><\/a><figcaption class=\"wp-element-caption\">Set the widget widths&#8217; so they add up to a little less than 100%<\/figcaption><\/figure><br><\/li><li>Select the container<\/li><li>Open the <strong>Layout <\/strong>tab and set <strong>Justify Content<\/strong> to <strong>Center<\/strong>. This will prevent the elements from spreading out too much on widescreen tablets.&nbsp;<br><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-16.png\"><img loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"468\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-16.png\" alt=\"The Layout tab of a container.\" class=\"wp-image-33014\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-16.png 308w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-16-197x300.png 197w\" sizes=\"(max-width: 308px) 100vw, 308px\" \/><\/a><figcaption class=\"wp-element-caption\">Switch Justify Content to Center.<\/figcaption><\/figure><br><\/li><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>.<\/li><li>Turn <strong>Wrap <\/strong>on. To help ensure that the elements will now appear in two columns.<br><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-17.png\"><img loading=\"lazy\" decoding=\"async\" width=\"311\" height=\"342\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-17.png\" alt=\"The Layout tab of the container.\" class=\"wp-image-33015\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-17.png 311w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-17-273x300.png 273w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/a><figcaption class=\"wp-element-caption\">Turning on wrap will ensure the elements appear in two columns<\/figcaption><\/figure><br><\/li><li>Enter responsive mode<\/li><li>Select Mobile<br><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"109\" height=\"43\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-18.png\" alt=\"\" class=\"wp-image-33016\"\/><\/figure><br><\/li><li>Adjust the <strong>Gap between elements <\/strong>to 70px (this value will vary somewhat depending on your design)&nbsp;<\/li><li>Use the viewport handles to check the layout and make any necessary adjustments to the elements.&nbsp;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"467\" height=\"781\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-19.png\" alt=\"\" class=\"wp-image-33017\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-19.png 467w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-19-179x300.png 179w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><figcaption class=\"wp-element-caption\">Drag the viewport handles to change the screen width.<\/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.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"467\" height=\"781\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-20.png\" alt=\"The viewport handles.\" class=\"wp-image-33018\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-20.png 467w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-20-179x300.png 179w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><figcaption class=\"wp-element-caption\">How the page looks on mobile.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/awSqTaWm-lF01uq0s-oG9V6xeHXdX3bZ0GaEpJGXppEdeam2oCVjnPq0oG5Rrc8WTa7Fk3Uj8covjRxXsBWMnfKve77dnNEcxNWdXSpEQ2Z_eFIcbrHXMiu9VVMKe9rzaO5EbhvIhIxP2FH_XUlmv2qEiqy-05ilLDOIF6XWLpL6btyTOPimQpBuWQ-c\" alt=\"How the page will appear on a tablet.\"\/><figcaption class=\"wp-element-caption\">How the page will appear on a tablet.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p>Learn how to <a href=\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\">space identical elements in a container using nested containers<\/a>.<\/p>\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>.\u00a0<\/p>\n\n\n\n<p>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":["659eb0679bf7b90d1e4450a2"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-33004","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 | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Spacing identical elements in a container 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\/spacing-identical-elements-in-a-container\/\" \/>\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 | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Spacing identical elements in a container in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-08T08:44:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T14:57:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1364\" \/>\n\t<meta property=\"og:image:height\" content=\"321\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Spacing identical elements in a container\",\"datePublished\":\"2023-01-08T08:44:44+00:00\",\"dateModified\":\"2024-01-10T14:57:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\"},\"wordCount\":761,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-1024x241.png\",\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\",\"url\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\",\"name\":\"Spacing identical elements in a container | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-1024x241.png\",\"datePublished\":\"2023-01-08T08:44:44+00:00\",\"dateModified\":\"2024-01-10T14:57:42+00:00\",\"description\":\"Learn everything about Spacing identical elements in a container in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png\",\"width\":1364,\"height\":321,\"caption\":\"We'll start with a container around four nested elements.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#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\"}]},{\"@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 | Elementor","description":"Learn everything about Spacing identical elements in a container 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\/spacing-identical-elements-in-a-container\/","og_locale":"en_US","og_type":"article","og_title":"Spacing identical elements in a container | Elementor","og_description":"Learn everything about Spacing identical elements in a container in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/","og_site_name":"Help","article_published_time":"2023-01-08T08:44:44+00:00","article_modified_time":"2024-01-10T14:57:42+00:00","og_image":[{"width":1364,"height":321,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Spacing identical elements in a container","datePublished":"2023-01-08T08:44:44+00:00","dateModified":"2024-01-10T14:57:42+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/"},"wordCount":761,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-1024x241.png","articleSection":["Flexbox containers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/","url":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/","name":"Spacing identical elements in a container | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9-1024x241.png","datePublished":"2023-01-08T08:44:44+00:00","dateModified":"2024-01-10T14:57:42+00:00","description":"Learn everything about Spacing identical elements in a container in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/image-9.png","width":1364,"height":321,"caption":"We'll start with a container around four nested elements."},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/#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"}]},{"@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\/33004","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=33004"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33004\/revisions"}],"predecessor-version":[{"id":33901,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33004\/revisions\/33901"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=33004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=33004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=33004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}