{"id":55043,"date":"2025-01-26T10:57:17","date_gmt":"2025-01-26T08:57:17","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=55043"},"modified":"2025-01-26T10:57:17","modified_gmt":"2025-01-26T08:57:17","slug":"span-content-over-multiple-cells-in-a-grid-layout","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/","title":{"rendered":"Span content over multiple cells in a grid layout"},"content":{"rendered":"\n

Grid containers are great for creating a symmetrical design, but they can be somewhat constrictive. The span content feature gives you greater flexibility with the grid layout, allowing content to span across multiple cells and giving you the ability to create complex layouts within a grid.<\/p>\n\n\n\n

Span content across multiple cells<\/h2>\n\n\n\n

Spanning content across multiple cells gives you greater design flexibility. For instance, you can create an image gallery with pictures of various sizes.<\/p>\n\n\n\n

[callout type=”note]Spanning works for most widgets, but in this example, we’ll just use Image widgets.[\/callout]<\/p>\n\n\n\n

To span content across multiple cells<\/strong>:<\/p>\n\n\n\n

    \n
  1. Create a Grid. For this example, we\u2019ll create a 4 by 2 grid.
    \"\"
     For details, see Create a Grid container<\/a>.<\/li>\n\n\n\n
  2. Drag an image widget to the first cell, the one in the upper left. 
    \"\"<\/li>\n\n\n\n
  3. Add content to the widget. For details, see Image widget<\/a>.
    \"\"<\/li>\n\n\n\n
  4. Click the Advanced<\/strong> tab.
    \"\"<\/li>\n\n\n\n
  5. In the panel, in the Grid Item<\/strong> section, use the Column Span<\/strong> dropdown menu to select 2<\/strong>.
    [callout type=”note”]When we changed the Column Span, it affected the height of the cell. As you can see if you look at the empty cell, this change affects all the cells in the grid because all cells in a grid are the same size.
    \"\" 
    [\/callout]
    \"\"<\/li>\n\n\n\n
  6. Use the Row Span<\/strong> dropdown menu to select 2.<\/strong>
    The Image widget takes up four cells.
    [callout type=”note”]The image appears to stay the same size, however it now takes up four cells instead of two. This affects the size of the cells as you can see from the empty cell. 
    \"\"
    [\/callout]
    \"\"<\/li>\n\n\n\n
  7. Drag an Image widget to the empty cell and add an image.
    \"\"<\/li>\n\n\n\n
  8. In the Advanced<\/strong> tab of this image, change the Column Span<\/strong> to 2<\/strong>.
    Now, let\u2019s add another image and create a blank area in the gallery. Normally with a grid, you can\u2019t have blank cells, but custom spanning allows this.
    \"\"<\/li>\n\n\n\n
  9. Add another image to the grid.<\/li>\n\n\n\n
  10. In the Advanced<\/strong> tab, use the Column Span<\/strong> dropdown menu to select Custom<\/strong>.
    \"\"<\/li>\n\n\n\n
  11. In the text box enter 4<\/strong>.<\/li>\n<\/ol>\n\n\n\n

    This custom setting means the image will start at the fourth vertical line or the end of the second column. See below for more information about the custom setting.<\/p>\n\n\n\n

    Using the custom field<\/h2>\n\n\n\n

    The Column Span<\/strong> and Row Span<\/strong> dropdown menus contain numeric values as well as a Custom<\/strong> field. Selecting Custom allows you to control spanning by entering code instead of selecting a number from the dropdown menu.<\/p>\n\n\n\n

    If you want to use the Custom<\/strong> field: <\/p>\n\n\n\n

      \n
    1. Create a Grid container and add a widget. 
      \"\"<\/li>\n<\/ol>\n\n\n\n
        \n
      1. Go to the Advanced<\/strong> tab of the selected widget.
        \"\"<\/li>\n\n\n\n
      2. Using the Column Span<\/strong> dropdown menu or the Row Span<\/strong> dropdown menu, select Custom<\/strong>.
        \"\"<\/li>\n\n\n\n
      3. Use the text box to enter code to span the widget.<\/li>\n<\/ol>\n\n\n\n

        Examples of custom code for spanning widgets:<\/p>\n\n\n\n

          \n
        • Span 2<\/strong>: Span across 2 rows or columns.
          [callout type=”note”]In the codes below, the numbers refer to the lines that border containers (see the chart below for reference.[\/callout]<\/li>\n\n\n\n
        • 1 \/ 3<\/strong>: Span from the first line to the third line. <\/li>\n\n\n\n
        • 2 \/ 5<\/strong>: Span from the second line to the fifth line. <\/li>\n<\/ul>\n\n\n\n
            \n
          1. <\/li>\n<\/ol>\n\n\n\n

            Custom codes give you increased flexibility, allowing you to create layouts that wouldn\u2019t be possible using the standard numbers in the dropdown menu..  <\/p>\n","protected":false},"excerpt":{"rendered":"

            Grid containers are great for creating a symmetrical design, but they can be somewhat constrictive. The span content feature gives you greater flexibility with the grid layout, allowing content to span across multiple cells and giving you the ability to create complex layouts within a grid. Span content across multiple cells Spanning content across multiple […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["6795f8f11ed0c3b3f377c180"],"footnotes":""},"categories":[1444],"tags":[1418],"class_list":["post-55043","post","type-post","status-publish","format-standard","hentry","category-grid-containers","tag-version-3-27"],"acf":[],"yoast_head":"\nSpan content over multiple cells in a grid layout | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Span content over multiple cells in a grid layout in this article from Elementor's Knowledge Base. Get Elementor tips & 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\/span-content-over-multiple-cells-in-a-grid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Span content over multiple cells in a grid layout | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Span content over multiple cells in a grid layout in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-26T08:57:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1372\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Span content over multiple cells in a grid layout\",\"datePublished\":\"2025-01-26T08:57:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/\"},\"wordCount\":554,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png\",\"keywords\":[\"Version 3.27\"],\"articleSection\":[\"Grid containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/\",\"url\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/\",\"name\":\"Span content over multiple cells in a grid layout | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png\",\"datePublished\":\"2025-01-26T08:57:17+00:00\",\"description\":\"Learn everything about Span content over multiple cells in a grid layout in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png\",\"width\":1372,\"height\":444},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#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\":\"Grid containers\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/grid-containers\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Span content over multiple cells in a grid layout\"}]},{\"@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":"Span content over multiple cells in a grid layout | Elementor","description":"Learn everything about Span content over multiple cells in a grid layout 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\/span-content-over-multiple-cells-in-a-grid-layout\/","og_locale":"en_US","og_type":"article","og_title":"Span content over multiple cells in a grid layout | Elementor","og_description":"Learn everything about Span content over multiple cells in a grid layout in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/","og_site_name":"Help","article_published_time":"2025-01-26T08:57:17+00:00","og_image":[{"width":1372,"height":444,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Span content over multiple cells in a grid layout","datePublished":"2025-01-26T08:57:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/"},"wordCount":554,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png","keywords":["Version 3.27"],"articleSection":["Grid containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/","url":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/","name":"Span content over multiple cells in a grid layout | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png","datePublished":"2025-01-26T08:57:17+00:00","description":"Learn everything about Span content over multiple cells in a grid layout in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-53.png","width":1372,"height":444},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/span-content-over-multiple-cells-in-a-grid-layout\/#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":"Grid containers","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/grid-containers\/"},{"@type":"ListItem","position":5,"name":"Span content over multiple cells in a grid layout"}]},{"@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\/55043","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=55043"}],"version-history":[{"count":10,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/55043\/revisions"}],"predecessor-version":[{"id":55443,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/55043\/revisions\/55443"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=55043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=55043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=55043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}