{"id":7864,"date":"2025-03-04T12:12:13","date_gmt":"2025-03-04T12:12:13","guid":{"rendered":"https:\/\/tableberg.com\/?p=7864"},"modified":"2025-03-04T12:13:47","modified_gmt":"2025-03-04T12:13:47","slug":"wie-man-den-rasterblock-in-wordpress-verwendet","status":"publish","type":"post","link":"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/","title":{"rendered":"Grid Block - \u00dcberblick und wie man ihn benutzt?"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.org\/documentation\/article\/grid-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Grid Block<\/a><\/strong> is a robust WordPress Gutenberg Block editor layout tool that allows you to create a multi-column layout without coding. It lets you arrange your content in a structured grid of rows and columns instead of being limited to a single column of text or media. <\/p>\n\n\n\n<p>Designing magazine-style pages, portfolios, galleries, or other sections where you want to add content side by side is easier using the WordPress Grid Block. Today, we will explore <strong>how to use the Grid Block in WordPress and give you an overview<\/strong>.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents ub_table-of-contents-collapsed\" id=\"ub_table-of-contents-c3f92918-11e9-4361-a228-74ccbbb14159\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"true\" data-initiallyshow=\"false\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">How to Use the Grid Block in WordPress?<\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"\">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"\">show<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column ub-hide\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/#0-how-to-use-the-grid-block-in-wordpress\" style=\"\">How to Use the Grid Block in WordPress?<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/#1-insert-the-grid-block\" style=\"\">Insert the Grid Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/#2-insert-your-content\" style=\"\">Insert Your Content<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/#3-block-customization\" style=\"\">Block Customization<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/#4-overview-of-the-wordpress-grid-block\" style=\"\">Overview of the WordPress Grid Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/de\/how-to-use-the-grid-block-in-wordpress\/#5-final-thoughts\" style=\"\">Final Thoughts!<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Create Beautiful Tables <\/strong><br><strong>With Block Editor<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Try Free<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-how-to-use-the-grid-block-in-wordpress\">How to Use the Grid Block in WordPress?<\/h2>\n\n\n\n<p>Now, let&#8217;s walk through a step-by-step guide on adding a Grid Block. These steps will help beginners and intermediate users make the most of this block.<\/p>\n\n\n\n<p>But before following the steps, you <strong>must go to your post and the pages where you want to use the block.<\/strong> After that, follow the steps below.<\/p>\n\n\n<!DOCTYPE html>\n<?xml version=\"1.0\" encoding=\"UTF-8\"?><div class=\"wp-block-ub-tabbed-content wp-block-ub-tabbed-content-underline wp-block-ub-tabbed-content-holder wp-block-ub-tabbed-content-horizontal-holder-mobile wp-block-ub-tabbed-content-horizontal-holder-tablet\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1\" style=\"\">\n\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-holder horizontal-tab-width-mobile horizontal-tab-width-tablet\">\n\t\t\t\t<div role=\"tablist\" class=\"wp-block-ub-tabbed-content-tabs-title wp-block-ub-tabbed-content-tabs-title-mobile-horizontal-tab wp-block-ub-tabbed-content-tabs-title-tablet-horizontal-tab\" style=\"justify-content: center; \"><div role=\"tab\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-tab-0\" aria-controls=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-panel-0\" aria-selected=\"true\" class=\"wp-block-ub-tabbed-content-tab-title-wrap active ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-title-color: #671feb; --ub-tabbed-active-title-color: #671feb; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: center; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 1<\/strong><\/div>\n\t\t\t<\/div><div role=\"tab\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-tab-1\" aria-controls=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-panel-1\" aria-selected=\"false\" class=\"wp-block-ub-tabbed-content-tab-title-wrap ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-active-title-color: #671feb; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: left; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 2<\/strong><\/div>\n\t\t\t<\/div><div role=\"tab\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-tab-2\" aria-controls=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-panel-2\" aria-selected=\"false\" class=\"wp-block-ub-tabbed-content-tab-title-wrap ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-active-title-color: #671feb; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: left; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 3<\/strong><\/div>\n\t\t\t<\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"wp-block-ub-tabbed-content-tabs-content\" style=\"border-top-left-radius: 0px;; border-top-right-radius: 0px;; border-bottom-left-radius: 0px;; border-bottom-right-radius: 0px;; \"><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap active\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-panel-0\" aria-labelledby=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-tab-0\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"1-insert-the-grid-block\">Insert the Grid Block<\/h3>\n\n\n\n<p>Click on the Add Block Icon <strong>(Plus Icon)<\/strong> <strong>(1)<\/strong>, type &ldquo;<strong>Grid<\/strong>&rdquo; in the search box&nbsp;<strong>(2)<\/strong>, and&nbsp;<strong>click on the block&nbsp;<\/strong>when it appears&nbsp;<strong>(3)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"556\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_13-53-30.png\" alt=\"How to use the Grid Block in WordPress\" class=\"wp-image-7867\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_13-53-30.png 888w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_13-53-30-300x188.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_13-53-30-768x481.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_13-53-30-18x12.png 18w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n<\/div><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap ub-hide\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-panel-1\" aria-labelledby=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-tab-1\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"2-insert-your-content\">Insert Your Content<\/h3>\n\n\n\n<p>By Default, you will see that only two columns inserted for content. Insert your content by click on the <strong>+ icon<\/strong> inside the block and then select your desired block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"892\" height=\"628\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_15-35-01.gif\" alt=\"\" class=\"wp-image-7872\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>Now insert other content or block by clicking at the bottom right side of the block. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"872\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_15-39-43.gif\" alt=\"\" class=\"wp-image-7873\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>You can insert any block you like. For my case, I&#8217;ve inserted the image block. <\/p>\n\n\n\n<p>You can insert set the column space for your each block. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1042\" height=\"756\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-05-55.gif\" alt=\"\" class=\"wp-image-7875\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n<\/div><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap ub-hide\" id=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-panel-2\" aria-labelledby=\"ub-tabbed-content-41d7097e-7f69-4bd7-aa4e-8e21923f05f1-tab-2\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"3-block-customization\">Block Customization<\/h3>\n\n\n\n<p>In the block customization, you get the options for the layout<strong> (1)<\/strong> and position <strong>(2)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"716\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18.png\" alt=\"\" class=\"wp-image-7877\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-300x242.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-768x621.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-15x12.png 15w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>In the Layout, you can choose the <strong>Grid Item Position<\/strong>. You can keep it in default or go with the manual.<\/p>\n\n\n\n<p>The Auto option lets you adjust the Minimum Column Width. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"716\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-1.png\" alt=\"\" class=\"wp-image-7878\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-1.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-1-300x242.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-1-768x621.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-46-18-1-15x12.png 15w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>The manual option lets you choose the columns for the block. You can easily adjust the number of columns within the block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"892\" height=\"800\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-57-23.png\" alt=\"\" class=\"wp-image-7880\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-57-23.png 892w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-57-23-300x269.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-57-23-768x689.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-57-23-13x12.png 13w\" sizes=\"auto, (max-width: 892px) 100vw, 892px\" \/><\/figure>\n\n\n\n<p>Next, you can choose whether to make your grid sticky or not. If you want to make it sticky, choose the sticky option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"877\" height=\"676\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-59-48-1.png\" alt=\"\" class=\"wp-image-7882\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-59-48-1.png 877w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-59-48-1-300x231.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-59-48-1-768x592.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_16-59-48-1-16x12.png 16w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><\/figure>\n\n\n\n<p>There are also prebuilt styles for the block in the Styles Tab. You can select and see what it does. Here&#8217;s the preview below. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"742\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-04-18.gif\" alt=\"\" class=\"wp-image-7884\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>You can customize the text and background color using the Color option. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"866\" height=\"582\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-08-12.png\" alt=\"\" class=\"wp-image-7885\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-08-12.png 866w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-08-12-300x202.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-08-12-768x516.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-08-12-18x12.png 18w\" sizes=\"auto, (max-width: 866px) 100vw, 866px\" \/><\/figure>\n\n\n\n<p>The Background image option lets you add an image for the block&#8217;s background. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"876\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-15-51.gif\" alt=\"\" class=\"wp-image-7886\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>To reset the image, click the three dots and select reset all. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-17-06.png\" alt=\"\" class=\"wp-image-7887\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-17-06.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-17-06-300x183.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-17-06-768x468.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-17-06-18x12.png 18w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>In the typography, you can set the font, font size, appearance, line height, letter spacing, decoration, and letter case. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"506\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-23-06.png\" alt=\"\" class=\"wp-image-7888\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-23-06.png 890w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-23-06-300x171.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-23-06-768x437.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-23-06-18x10.png 18w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/figure>\n\n\n\n<p>The dimensions let you customize the padding, margin, minimum height, and block spacing for the Grid block. <\/p>\n\n\n\n<p>Let&#8217;s see the modification of the Block Spacing and Minimum Height below. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"734\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-27-47.gif\" alt=\"\" class=\"wp-image-7889\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>Lastly, the border &amp; shadow option lets you adjust the border and border radius for the block. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"206\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-28-48.png\" alt=\"\" class=\"wp-image-7890\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-28-48.png 278w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-28-48-16x12.png 16w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>Here is the final demo of what I&#8217;ve made using the block. It&#8217;s not the best, but it gives ideas of what this block can do. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"850\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-30-47.png\" alt=\"\" class=\"wp-image-7891\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-30-47.png 748w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-30-47-264x300.png 264w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-30-47-11x12.png 11w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure>\n\n<\/div><\/div>\n\t\t<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-overview-of-the-wordpress-grid-block\">Overview of the WordPress Grid Block<\/h2>\n\n\n<div class=\"wp-block-ub-content-toggle wp-block-ub-content-toggle-block\" id=\"ub-content-toggle-block-79025701-763d-43cb-a0ad-73c715ebb785\" data-mobilecollapse=\"true\" data-desktopcollapse=\"true\" data-preventcollapse=\"false\" data-showonlyone=\"false\">\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-0-79025701-763d-43cb-a0ad-73c715ebb785\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-79025701-763d-43cb-a0ad-73c715ebb785\" style=\"color: #5344F4; \"><strong>What is the Grid Block in WordPress?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-0-79025701-763d-43cb-a0ad-73c715ebb785\">\n\n<p>The Grid Block is a container block that holds all other blocks in a grid layout. In other words, it&#8217;s a parent block in which you can place multiple child blocks (like paragraphs, images, buttons, etc.), and it will arrange them in a series of columns. It automatically creates new rows as needed.<\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-1-79025701-763d-43cb-a0ad-73c715ebb785\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-79025701-763d-43cb-a0ad-73c715ebb785\" style=\"color: #5344F4; \"><strong>What are the Key Features of the Grid Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-1-79025701-763d-43cb-a0ad-73c715ebb785\">\n\n<p>The Grid Block has several useful features, making it a versatile tool for building layouts. Here are some of the key features:<\/p>\n\n\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 15px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-2a12899e-aa06-4461-926f-e21bdc9a33a9\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-a2bc655a-02de-4bc8-8f13-e011846ccdb6\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Flexible Column Layouts:<\/strong> You can choose how many columns you want in your grid. The Grid Block lets you set a specific number of columns or let WordPress automatically determine the number of columns based on a minimum column width. <\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-8ef0679f-742f-4f1b-8803-b49ec0096cfc\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Responsive Design:<\/strong> Content arranged in a Grid Block is mobile-friendly.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-16f95c19-7bb2-431b-ab88-e01ade17e980\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Content Arrangement and Reordering: It\u2019s easy to arrange and rearrange blocks within the grid. You can drag and drop content blocks to different positions or use arrow keys to move them up\/down within the Grid Block container.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-fe8446e2-2b96-4480-add7-8b23fcd1f5ef\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong><strong>Custom Styling Options:<\/strong> <\/strong>You can change the background color or add a background image to the section, adjust text colors for content inside, and tweak typography (font sizes, font families) all in one place.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-e0f742f3-8cf4-4d04-a228-d1c0c11dde9a\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Integration with Other Layout Blocks:<\/strong> It allows you to <strong>transform<\/strong> it into other layout blocks like a standard Group, a Row, a Stack, a Cover block, or even the older Columns block if needed\u200b.<a href=\"https:\/\/wordpress.org\/documentation\/article\/grid-block\/#:~:text=Grid%20block%20is%20one%20of,the%20content%20of%20the%20block\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-2-79025701-763d-43cb-a0ad-73c715ebb785\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-79025701-763d-43cb-a0ad-73c715ebb785\" style=\"color: #5344F4; \"><strong>What are the Toolbar Features of the Grid Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-2-79025701-763d-43cb-a0ad-73c715ebb785\">\n\n<p>When you select the Grid Block in the editor, a <strong>block toolbar<\/strong> appears at the top of the block. This toolbar provides quick controls for common actions and customization.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"492\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-44-09.png\" alt=\"\" class=\"wp-image-7892\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-44-09.png 888w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-44-09-300x166.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-44-09-768x426.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/2025-03-04_17-44-09-18x10.png 18w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Transform:<\/strong> You can transform a Grid Block into a Group, Row, Stack, Cover, or Column block while preserving the inner content.<\/li>\n\n\n\n<li><strong>Drag Handle:<\/strong> The six dots icon allows you to drag and move the entire Grid Block to a different position on your page.<\/li>\n\n\n\n<li><strong>Move Up\/Down:<\/strong> The up and down arrow icons let you nudge the Grid Block one position upward or downward in the document structure\u200b.<\/li>\n\n\n\n<li><strong>Alignment (Width Alignment):<\/strong> The alignment icon lets you change the width setting of the Grid Block container.<\/li>\n\n\n\n<li><strong>More Options:<\/strong> The three vertical dots open a dropdown menu with additional block options.<\/li>\n<\/ol>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-final-thoughts\">Final Thoughts!<\/h2>\n\n\n\n<p>The Grid Block is an awesome Block that is a fantastic addition to WordPress&#8217;s design Toolkit. It offers you the ability to create flexible and multi-column layouts easily. <\/p>\n\n\n\n<p>Using the block, you can build more mesmerizing and engaging sections for your website. In summary, the Grid Block helps you break out of the single-column format and showcase content side by side in a clean grid structure.<\/p>\n\n\n\n<p>Let me know your thoughts in the comment sections. Also, please share it with your friends using your social media. <\/p>\n\n\n\n<p><strong>Read More!<\/strong><\/p>\n\n\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-2a3e7bcf-0161-4764-af26-9ad3b412a7f9\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-92e93cc0-9fe4-4849-a442-94e4574db28a\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-add-an-faq-section-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add an FAQ Section in WordPress (With\/out a Plugin)<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-09b32d17-26a7-479c-98fa-8d8411d7b2c2\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-more-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">More Block &#8211; How to Use It &amp; Overview<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-e96a77d4-98d2-4109-be9b-a9a9e857f68e\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/wordpress-block-editor-vs-classic-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Block Editor vs Classic Editor: What are the Differences<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-2b4aa36a-120b-42a3-a53c-62ae9abf6434\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-archives-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Archives Block &#8211; How to Use It &amp; Overview!<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-cf2f4811-a364-4158-9fc1-3877d24cd835\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-pullquote-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pullquote Block &#8211; Overview &amp; How to Use It!<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n<div class=\"wp-block-ub-social-share\" id=\"ub-social-share-1bda2932-248b-455d-9ece-e2dd849cce31\">\n\t\t\t<div class=\"social-share-icons align-icons-center orientation-icons-row\"><a aria-label=\"facebook-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Ftableberg.com%2Fde%2Fhow-to-use-the-grid-block-in-wordpress%2F&amp;title=Grid%20Block%20%26%238211%3B%20Overview%20%26amp%3B%20How%20to%20Use%20It%3F\" class=\"ub-social-share-facebook-container\" style=\"border-color: #1877f2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-facebook\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#1877f2\" fill=\"#1877f2\" width=\"20\" height=\"20\" viewbox=\"0 0 264 512\"><path d=\"M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><a aria-label=\"twitter-logo\" target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Ftableberg.com%2Fde%2Fhow-to-use-the-grid-block-in-wordpress%2F&amp;text=Grid%20Block%20%26%238211%3B%20Overview%20%26amp%3B%20How%20to%20Use%20It%3F\" class=\"ub-social-share-twitter-container\" style=\"border-color: #1d9bf0; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-twitter\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"color:#1d9BF0\" fill=\"#1d9BF0\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"><\/path><\/svg><\/span><span style=\"\">tweet<\/span>\n\t\t\t<\/a><a aria-label=\"linkedin-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Ftableberg.com%2Fde%2Fhow-to-use-the-grid-block-in-wordpress%2F\" class=\"ub-social-share-linkedin-container\" style=\"border-color: #2867b2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-linkedin\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#2867b2\" fill=\"#2867b2\" width=\"20\" height=\"20\" viewbox=\"0 0 448 512\"><path d=\"M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><\/div>\n\t\t<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Grid Block is a robust WordPress Gutenberg Block editor layout tool that allows you to create a multi-column layout without coding. It lets you arrange your content in a structured grid of rows and columns instead of being limited to a single column of text or media. Designing magazine-style pages, portfolios, galleries, or other [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":7866,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-7864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/How-to-Use-the-Grid-Block-in-WordPress-1140-x-450.png","author_info":{"display_name":"Ankur Raj Bongshi","author_link":"https:\/\/tableberg.com\/de\/author\/rajankur003\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts\/7864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/comments?post=7864"}],"version-history":[{"count":12,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts\/7864\/revisions"}],"predecessor-version":[{"id":7901,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts\/7864\/revisions\/7901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/media\/7866"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/media?parent=7864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/categories?post=7864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/tags?post=7864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}