{"id":20950,"date":"2020-10-22T08:02:50","date_gmt":"2020-10-22T08:02:50","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=20950"},"modified":"2023-02-09T19:18:27","modified_gmt":"2023-02-09T19:18:27","slug":"jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/","title":{"rendered":"How to Create Posts Grid in Gutenberg Editor"},"content":{"rendered":"\n<div class=\"info-banner\">\n\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2018\/12\/information-icon.svg\" alt=\"\" width=\"30\" height=\"30\" \/>\n<p>From this tutorial, you will learn how to use all functionalities of the JetGridBuilder plugin in Gutenberg Editor.<\/p>\n<\/div>\n\n\n\n<p>Some of the Crocoblock plugins work not only with Elementor page builder but can be used for Gutenberg Editor as well. JetGridBuilder is one of them; with its help, you can compose cool posts or terms grid layout. In this tutorial, we will go through the settings of the Posts Grid Builder extension but they are almost similar to the Terms Grid Builder features. If you would like to build a terms grid, all the steps will be the same. So, let\u2019s start.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Add the Posts Grid Builder block<\/strong><\/p>\n\n\n\n<p>By this time, you have probably installed and activated the JetGridBuilder plugin. In the WordPress dashboard, find the post or page where you want to place a grid and click the \u201c<strong>Edit<\/strong>\u201d button. Open the blocks menu by hitting the \u201c<strong>Add Block<\/strong>\u201d button (the one with a \u201c+\u201d icon) and search for the <strong>Posts Grid Builder<\/strong> block. Click on it to add it to the page.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/posts-grid-builder-block.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/posts-grid-builder-block-2x.png 2x\" alt=\"adding GridBuilder block\" class=\"wp-image-20963\"\/><\/figure><\/div>\n\n\n\n<p>By default, the block is empty, so you have to press the \u201c<strong>Add Posts<\/strong>\u201d button and choose the posts you want to place on the grid. Be aware that you can also display products on the grid.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/no-posts-block.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/no-posts-block-2x.png 2x\" alt=\"starting Grid Builder look\" class=\"wp-image-20961\"\/><\/figure><\/div>\n\n\n\n<p>You can easily resize each of the tiles and move them to any place you want by just dragging over. The height of the grid resizes automatically when you move the tiles, and the width can be changed in the settings.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay loop muted src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/grid-builder-guten.webm\"><\/video><\/figure>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Define the settings<\/strong><\/p>\n\n\n\n<p>There are three settings sections that define the look of your posts grid. The widgets for Elementor page builder allow you to set the design of the grid but there are no such functionalities in Gutenberg. The appearance of the grid will be determined according to the general website template design.<\/p>\n\n\n\n<p><strong>General settings section<\/strong><\/p>\n\n\n\n<ul><li><strong>Vertical Compact<\/strong>. By default, this toggle is turned off. In this case, you can place the post tiles anywhere on the grid. However, when you turn it on, the posts will be automatically aligned to the top edge of the page;<\/li><li><strong>Gutter<\/strong>. This field defines the gap between grid cells. The bigger it is, the wider the gap will be;<\/li><li><strong>Number of columns<\/strong>. Here you can change the width of the grid by changing the number of columns. There could be from 3 to 50 columns in the grid;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-general-settings.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-general-settings-2x.png 2x\" alt=\"Grid Builder General settings\" class=\"wp-image-20951\"\/><\/figure><\/div>\n\n\n\n<ul><li><strong>Items Type<\/strong>. There are two options in this drop-down menu. The \u201cPost Content\u201d option means that the content of the post will be shown right on the tile. And the \u201cJetEngine Listing\u201d option allows you to choose one of the previously created listing designs;<\/li><li><strong>Item Style<\/strong>. This feature defines how the thumbnail will be shown on the tile. The \u201cStandard\u201d option means that the thumbnail will be placed over the text info, and the \u201cContent Overlay\u201d option makes the content overlay the image;<\/li><li><strong>Woo Items<\/strong> <strong>Type<\/strong>. You will need this feature if there are some WooCommerce products on the grid. If you choose the \u201cDefault\u201d option, the products will be displayed with the same design as the posts. Besides that, there is an option to show the products with the design and layout you set using the JetWooBuilder plugin;<\/li><li><strong>Woo Item Style<\/strong>. Here again, you can choose the tiles appearance type \u2013 the one where the thumbnail is shown over the text or the one where information overlays the picture;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-general-settings-2.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-general-settings-2-2x.png 2x\" alt=\"Grid Builder General settings\" class=\"wp-image-20952\"\/><\/figure><\/div>\n\n\n\n<ul><li><strong>Loading Spinner<\/strong>. When the posts are loading, you can show an animated icon to the users. If you want to \u2013 turn this toggle on. Then you will be able to choose whether you want to show the spinner only during the loading process, as well as select the type of animated icon for it.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-general-settings-3.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-general-settings-3-2x.png 2x\" alt=\"Grid Builder General settings\" class=\"wp-image-20955\"\/><\/figure><\/div>\n\n\n\n<p><strong>Post Item settings section<\/strong><\/p>\n\n\n\n<p>All the parts of the tile can be thrown out, excluding the description of the post. The excerpt will remain on the tile even if you disable all other elements. The Post Item section contains toggles that can turn on or off the <strong>Thumbnail<\/strong>, <strong>Title<\/strong>, <strong>Author<\/strong>, <strong>Date<\/strong>, <strong>Divider<\/strong>, and <strong>Post Type<\/strong>. Play with them to define what information you would like to display on the tiles.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-post-item-settings.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-post-item-settings-2x.png 2x\" alt=\"Grid Builder Post Item settings\" class=\"wp-image-20957\"\/><\/figure><\/div>\n\n\n\n<p><strong>WooCommerce Product settings section<\/strong><\/p>\n\n\n\n<p>Once again, you\u2019ll find this section useful only if there are some products on the grid. The toggles here allow you to add\/remove elements to\/from the product\u2019s tile. <strong>Stars rating<\/strong>, <strong>Categories<\/strong>, <strong>Price <\/strong>and <strong>Add to Cart<\/strong> button \u2013 you can decide whether to show them on the tile or not.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-woocommerce-settings.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/10\/gridbuilder-woocommerce-settings-2x.png 2x\" alt=\"Grid Builder WooCommerce settings\" class=\"wp-image-20959\"\/><\/figure><\/div>\n\n\n\n<p>When you are done, click the \u201c<strong>Update<\/strong>\u201d or \u201c<strong>Publish<\/strong>\u201d button to save the changes. Even though you can\u2019t affect the design of the grid, you can still create an attractive layout. Appearance created with the Elementor tools would probably be more interesting but the grid built in Gutenberg has less impact on the loading speed.<\/p>\n\n\n\n<p>That\u2019s it, you have created a Posts Grid using the JetGridBuilder plugin. If you need a Terms Grid, repeat the same steps. Enjoy!<\/p>\n\n\n\n<div class=\"banner invert\">\n<h3>Need a set of reliable tools?<\/h3>\nCheck out JetPlugins by Crocoblock!  \n<p><p>\n<a href=\"https:\/\/crocoblock.com\/plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">Find out more<\/a>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will learn how to use all functionalities of the JetGridBuilder plugin in Gutenberg Editor. Some of the Crocoblock plugins work not only with Elementor page builder but can be used for Gutenberg Editor as well. JetGridBuilder is one of them; with its help, you can compose cool posts or terms grid [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[490],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetGridBuilder: Gutenberg Compatibility Overview | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find out how to create astonishing grids in Gutenberg Editor using Posts Grid Builder and Terms Grid Builder widgets of JetGridBuilder plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetGridBuilder: Gutenberg Compatibility Overview | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find out how to create astonishing grids in Gutenberg Editor using Posts Grid Builder and Terms Grid Builder widgets of JetGridBuilder plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-09T19:18:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2018\/12\/information-icon.svg\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/\",\"name\":\"JetGridBuilder: Gutenberg Compatibility Overview | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-10-22T08:02:50+00:00\",\"dateModified\":\"2023-02-09T19:18:27+00:00\",\"description\":\"Find out how to create astonishing grids in Gutenberg Editor using Posts Grid Builder and Terms Grid Builder widgets of JetGridBuilder plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Posts Grid in Gutenberg Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetGridBuilder: Gutenberg Compatibility Overview | Crocoblock","description":"Find out how to create astonishing grids in Gutenberg Editor using Posts Grid Builder and Terms Grid Builder widgets of JetGridBuilder plugin.","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:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/","og_locale":"en_US","og_type":"article","og_title":"JetGridBuilder: Gutenberg Compatibility Overview | Crocoblock","og_description":"Find out how to create astonishing grids in Gutenberg Editor using Posts Grid Builder and Terms Grid Builder widgets of JetGridBuilder plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/","og_site_name":"Help Center","article_modified_time":"2023-02-09T19:18:27+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2018\/12\/information-icon.svg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/","name":"JetGridBuilder: Gutenberg Compatibility Overview | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-10-22T08:02:50+00:00","dateModified":"2023-02-09T19:18:27+00:00","description":"Find out how to create astonishing grids in Gutenberg Editor using Posts Grid Builder and Terms Grid Builder widgets of JetGridBuilder plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetgridbuilder-how-to-create-posts-grid-in-gutenberg-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create Posts Grid in Gutenberg Editor"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/20950"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=20950"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=20950"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=20950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}