{"id":3130,"date":"2025-08-04T18:26:30","date_gmt":"2025-08-04T18:26:30","guid":{"rendered":"https:\/\/flexipostgrid.creativewebui.com\/?post_type=docs&p=3130"},"modified":"2025-08-04T18:26:30","modified_gmt":"2025-08-04T18:26:30","password":"","slug":"grid-spacing-and-columns","status":"publish","type":"docs","link":"https:\/\/creativewebui.com\/flexi-post-grid\/documentation\/grid-spacing-and-columns\/","title":{"rendered":"Grid Spacing and Columns"},"content":{"rendered":"\n

Control the layout structure of your grid with customizable column count<\/strong> and gutter spacing<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Settings<\/h2>\n\n\n\n
Setting<\/th>Description<\/th><\/tr><\/thead>
Number of Columns<\/strong><\/td>Set how many columns to show per row. This is fully responsive<\/strong>: you can customize the number of columns for Desktop<\/strong>, Tablet<\/strong>, and Mobile<\/strong> separately.<\/td><\/tr>
Gutter Space<\/strong><\/td>Controls the spacing (in pixels) between each grid item. Default is 20<\/code>. Set to 0<\/code> for no spacing.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Responsive Breakpoints for Columns<\/h2>\n\n\n\n
Device<\/th>Example Value<\/th>Description<\/th><\/tr><\/thead>
Desktop<\/strong><\/td>3<\/code> columns<\/td>Standard large screen layout<\/td><\/tr>
Tablet<\/strong><\/td>2<\/code> columns<\/td>Optimized for medium screens<\/td><\/tr>
Mobile<\/strong><\/td>1<\/code> column<\/td>Stacks items vertically for small screens<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Use Case Example<\/h2>\n\n\n\n

Scenario:<\/strong> You want a product grid that looks clean across devices:<\/p>\n\n\n\n

    \n
  • Desktop: 4 columns<\/li>\n\n\n\n
  • Tablet: 2 columns<\/li>\n\n\n\n
  • Mobile: 1 column
    Set it directly in the “Number of Columns”<\/strong> responsive control.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

    Control the layout structure of your grid with customizable column count and gutter spacing. Settings Setting Description Number of Columns Set how many columns to show per row. This is fully responsive: you can customize the number of columns for Desktop, Tablet, and Mobile separately. Gutter Space Controls the spacing (in pixels) between each grid item. Default is 20. Set to 0 for no spacing. Responsive Breakpoints for Columns Device Example Value Description Desktop 3 columns Standard large screen layout Tablet 2 columns Optimized for medium screens Mobile 1 column Stacks items vertically for small screens Use Case Example Scenario: You want a product grid that looks clean across devices:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[26],"doc_tag":[],"class_list":["post-3130","docs","type-docs","status-publish","hentry","doc_category-using-the-plugin"],"year_month":"2026-04","word_count":108,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Elementordipak","author_nicename":"elementordipak","author_url":"https:\/\/creativewebui.com\/flexi-post-grid\/author\/elementordipak\/"},"doc_category_info":[{"term_name":"Using the Plugin","term_url":"https:\/\/creativewebui.com\/flexi-post-grid\/docs-category\/using-the-plugin\/"}],"doc_tag_info":[],"yoast_head":"\nGrid Spacing and Columns - Flexi Post Grid<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grid Spacing and Columns - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"Control the layout structure of your grid with customizable column count and gutter spacing. Settings Setting Description Number of Columns Set how many columns to show per row. This is fully responsive: you can customize the number of columns for Desktop, Tablet, and Mobile separately. Gutter Space Controls the spacing (in pixels) between each grid item. Default is 20. Set to 0 for no spacing. Responsive Breakpoints for Columns Device Example Value Description Desktop 3 columns Standard large screen layout Tablet 2 columns Optimized for medium screens Mobile 1 column Stacks items vertically for small screens Use Case Example Scenario: You want a product grid that looks clean across devices:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/\",\"name\":\"Grid Spacing and Columns - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg\",\"datePublished\":\"2025-08-04T18:26:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#primaryimage\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg\",\"contentUrl\":\"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/creativewebui.com\/flexi-post-grid\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/flexipostgrid.creativewebui.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Grid Spacing and Columns\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexipostgrid.creativewebui.com\/#website\",\"url\":\"https:\/\/flexipostgrid.creativewebui.com\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grid Spacing and Columns - Flexi Post Grid","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:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/","og_locale":"en_US","og_type":"article","og_title":"Grid Spacing and Columns - Flexi Post Grid","og_description":"Control the layout structure of your grid with customizable column count and gutter spacing. Settings Setting Description Number of Columns Set how many columns to show per row. This is fully responsive: you can customize the number of columns for Desktop, Tablet, and Mobile separately. Gutter Space Controls the spacing (in pixels) between each grid item. Default is 20. Set to 0 for no spacing. Responsive Breakpoints for Columns Device Example Value Description Desktop 3 columns Standard large screen layout Tablet 2 columns Optimized for medium screens Mobile 1 column Stacks items vertically for small screens Use Case Example Scenario: You want a product grid that looks clean across devices:","og_url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/","og_site_name":"Flexi Post Grid","og_image":[{"url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/","url":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/","name":"Grid Spacing and Columns - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#primaryimage"},"image":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg","datePublished":"2025-08-04T18:26:30+00:00","breadcrumb":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#primaryimage","url":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg","contentUrl":"https:\/\/flexipostgrid.creativewebui.com\/wp-content\/uploads\/2025\/08\/Screenshot_5.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/grid-spacing-and-columns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/flexipostgrid.creativewebui.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"Grid Spacing and Columns"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=3130"}],"version-history":[{"count":1,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3130\/revisions"}],"predecessor-version":[{"id":3132,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/docs\/3130\/revisions\/3132"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=3130"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_category?post=3130"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/doc_tag?post=3130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}