{"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":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%b0%e3%83%aa%e3%83%83%e3%83%89%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-use-the-grid-block-in-wordpress\/","title":{"rendered":"\u30b0\u30ea\u30c3\u30c9\u30fb\u30d6\u30ed\u30c3\u30af - \u6982\u8981\u3068\u4f7f\u3044\u65b9"},"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\/ja\/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\/ja\/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\/ja\/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\/ja\/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\/ja\/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\/ja\/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%2Fja%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%2Fja%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%2Fja%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 sections where you want to add content side by side is easier using the WordPress Grid Block. Today, we will explore how to use the Grid Block in WordPress and give you an overview. How to Use the Grid Block in WordPress? Now, let&#8217;s walk through a step-by-step guide on adding a Grid Block. These [&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\/ja\/author\/rajankur003\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=7864"}],"version-history":[{"count":12,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7864\/revisions"}],"predecessor-version":[{"id":7901,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7864\/revisions\/7901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7866"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=7864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=7864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=7864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}