{"id":41,"date":"2023-08-10T20:45:47","date_gmt":"2023-08-10T20:45:47","guid":{"rendered":"https:\/\/crosswindsframework.com\/docs\/?post_type=article&#038;p=41"},"modified":"2024-01-20T17:00:11","modified_gmt":"2024-01-20T23:00:11","slug":"crosswinds-blocks-basic-grid-block","status":"publish","type":"article","link":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/","title":{"rendered":"Crosswinds Blocks \u2014 Basic Grid Block"},"content":{"rendered":"\n<p>The basic grid block allows you to create a simple grid of items. This can be really helpful in showing off a list of features for a product or service or a list of services that you offer. And you can control how many columns are shown at mobile, tablet and desktop screen sizes.<\/p>\n\n\n\n<p>If you want to show a grid of posts in a query, you\u2019ll still want to use the query loop block and select the grid option.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Crosswinds Blocks \u2014 Grid Block\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/34Ll-Qb9wi8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-settings-attributes\">Settings\/Attributes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This block has a child\/inner block (basic grid item) that uses all of the spacing (margin\/padding\/block spacing), colors, borders and typography settings.<\/li>\n\n\n\n<li>Attributes<\/li>\n\n\n\n<li>Number of Desktop Columns &#8211; the number of columns shown on desktop screen sizes.<\/li>\n\n\n\n<li>Number of Tablet Columns &#8211; the number of columns shown on tablet screen sizes.<\/li>\n\n\n\n<li>Number of Mobile Columns &#8211; the number of columns shown on mobile screen sizes.<\/li>\n\n\n\n<li>Grid Gap &#8211; the amount of space between items in the grid.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-this-block\">How to use this block<\/h2>\n\n\n\n<p>The basic grid block is pretty simple to use. When you add the block to your content, you\u2019ll want to set the number of columns for each screen size. Then you can start adding in your grid items.<\/p>\n\n\n\n<p>You can also customize the number of rows and columns a grid item takes up on desktop, tablet and mobile screen sizes. Just make sure that the numbers add up for the correct number of columns used by grid items.<\/p>\n\n\n\n<p>When you add a new grid item, the block will add in a basic grid item block. This block acts like a group block, but it also comes with vertical alignment options: normal, top, center, bottom, equal spacing and aligning the last item at the bottom. This block also has all of the spacing, color, typography and border settings as a group block.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The basic grid block allows you to create a simple grid of items. This can be really helpful in showing off a list of features for a product or service or a list of services that you offer. And you can control how many columns are shown at mobile, tablet and desktop screen sizes. If&#8230;<\/p>\n","protected":false},"featured_media":0,"parent":39,"menu_order":0,"template":"","product":[3],"class_list":["post-41","article","type-article","status-publish","hentry","product-crosswinds-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.3) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crosswinds Blocks \u2014 Basic Grid Block - Crosswinds Framework Documentation<\/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:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crosswinds Blocks \u2014 Basic Grid Block\" \/>\n<meta property=\"og:description\" content=\"The basic grid block allows you to create a simple grid of items. This can be really helpful in showing off a list of features for a product or service or a list of services that you offer. And you can control how many columns are shown at mobile, tablet and desktop screen sizes. If...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Crosswinds Framework Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-20T23:00:11+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/\",\"url\":\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/\",\"name\":\"Crosswinds Blocks \u2014 Basic Grid Block - Crosswinds Framework Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/crosswindsframework.com\/docs\/#website\"},\"datePublished\":\"2023-08-10T20:45:47+00:00\",\"dateModified\":\"2024-01-20T23:00:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crosswindsframework.com\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crosswinds Blocks Blocks\",\"item\":\"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Crosswinds Blocks \u2014 Basic Grid Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crosswindsframework.com\/docs\/#website\",\"url\":\"https:\/\/crosswindsframework.com\/docs\/\",\"name\":\"Crosswinds Framework Documentation\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crosswindsframework.com\/docs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crosswinds Blocks \u2014 Basic Grid Block - Crosswinds Framework Documentation","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:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/","og_locale":"en_US","og_type":"article","og_title":"Crosswinds Blocks \u2014 Basic Grid Block","og_description":"The basic grid block allows you to create a simple grid of items. This can be really helpful in showing off a list of features for a product or service or a list of services that you offer. And you can control how many columns are shown at mobile, tablet and desktop screen sizes. If...","og_url":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/","og_site_name":"Crosswinds Framework Documentation","article_modified_time":"2024-01-20T23:00:11+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/","url":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/","name":"Crosswinds Blocks \u2014 Basic Grid Block - Crosswinds Framework Documentation","isPartOf":{"@id":"https:\/\/crosswindsframework.com\/docs\/#website"},"datePublished":"2023-08-10T20:45:47+00:00","dateModified":"2024-01-20T23:00:11+00:00","breadcrumb":{"@id":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/crosswinds-blocks-basic-grid-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crosswindsframework.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Crosswinds Blocks Blocks","item":"https:\/\/crosswindsframework.com\/docs\/article\/crosswinds-blocks-blocks\/"},{"@type":"ListItem","position":3,"name":"Crosswinds Blocks \u2014 Basic Grid Block"}]},{"@type":"WebSite","@id":"https:\/\/crosswindsframework.com\/docs\/#website","url":"https:\/\/crosswindsframework.com\/docs\/","name":"Crosswinds Framework Documentation","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crosswindsframework.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/crosswindsframework.com\/docs\/wp-json\/wp\/v2\/article\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crosswindsframework.com\/docs\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crosswindsframework.com\/docs\/wp-json\/wp\/v2\/types\/article"}],"up":[{"embeddable":true,"href":"https:\/\/crosswindsframework.com\/docs\/wp-json\/wp\/v2\/article\/39"}],"wp:attachment":[{"href":"https:\/\/crosswindsframework.com\/docs\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"product","embeddable":true,"href":"https:\/\/crosswindsframework.com\/docs\/wp-json\/wp\/v2\/product?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}