Title: Grid block Author: Akira Tachibana Published: September 1, 2024 Last modified: May 31, 2026 --- # Grid block ## In this article * [Block toolbar](https://wordpress.org/documentation/article/grid-block/?output_format=md#block-toolbar) - [Transform to](https://wordpress.org/documentation/article/grid-block/?output_format=md#transform-to) - [Moving handles](https://wordpress.org/documentation/article/grid-block/?output_format=md#moving-handles) - [Align](https://wordpress.org/documentation/article/grid-block/?output_format=md#align) - [Options](https://wordpress.org/documentation/article/grid-block/?output_format=md#options) * [Block settings](https://wordpress.org/documentation/article/grid-block/?output_format=md#block-settings) - [Layout](https://wordpress.org/documentation/article/grid-block/?output_format=md#layout) - [Position](https://wordpress.org/documentation/article/grid-block/?output_format=md#position) - [Advanced](https://wordpress.org/documentation/article/grid-block/?output_format=md#advanced) * [Block styles](https://wordpress.org/documentation/article/grid-block/?output_format=md#block-styles) - [Color](https://wordpress.org/documentation/article/grid-block/?output_format=md#color) - [Background image](https://wordpress.org/documentation/article/grid-block/?output_format=md#background-image) - [Typography](https://wordpress.org/documentation/article/grid-block/?output_format=md#typography) - [Dimensions](https://wordpress.org/documentation/article/grid-block/?output_format=md#dimensions) - [Border](https://wordpress.org/documentation/article/grid-block/?output_format=md#border) * [Changelog](https://wordpress.org/documentation/article/grid-block/?output_format=md#changelog) [ Back to top](https://wordpress.org/documentation/article/grid-block/?output_format=md#wp--skip-link--target) [Go back to the list of **Blocks**](https://wordpress.org/documentation/article/blocks/) Grid block is one of the container blocks that can be used to organize multiple blocks and adjust the height, width, and position of all blocks inside the container. As a container block, it’s possible to transform a Grid block into a Group, Row or Stack block without changing the content of the block. Click the block inserter **(+)** icon to open the block inserter pop-up window and search for the _Grid _block. You can also use the keyboard shortcut /grid to quickly insert a Grid block. Detailed instructions on adding blocks can be found [here](https://wordpress.org/documentation/article/adding-a-new-block/). ## 󠀁[Block toolbar](https://wordpress.org/documentation/article/grid-block/?output_format=md#block-toolbar)󠁿 To view the block toolbar, click on the block, and the toolbar will be displayed. Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor. The Grid block shows the following buttons in the block toolbar: ![Grid block Toolbar](https://wordpress.org/documentation/files/2024/08/grid-block- toolbar-6.6-300x77.jpg) * Transform to * Moving handles * Align * Options ### 󠀁[Transform to](https://wordpress.org/documentation/article/grid-block/?output_format=md#transform-to)󠁿 ![Grid block Toolbar - Transform to button](https://wordpress.org/documentation/ files/2024/08/grid-block-toolbar-transforms-6.6.jpg) Click on the “Transform” button to convert the Grid block into Group, Row, Stack, Cover or Columns blocks.   ### 󠀁[Moving handles](https://wordpress.org/documentation/article/grid-block/?output_format=md#moving-handles)󠁿 The dotted icons can be used to drag and drop a block to the place of your choosing. The up and down arrow icons can be used to shift a block up and down in your document. ![Grid block Toolbar - Moving handles](https://wordpress.org/documentation/files/ 2024/08/grid-block-toolbar-movinghandle-6.6-300x77.jpg) [Get more information about moving a block within the editor.](https://wordpress.org/documentation/article/moving-blocks/) ### 󠀁[Align](https://wordpress.org/documentation/article/grid-block/?output_format=md#align)󠁿 ![Grid block Toolbar - Align button](https://wordpress.org/documentation/files/2024/ 08/grid-block-toolbar-align-6.6-300x181.jpg) Use the change alignment tool to change the width of the Grid block. The following is a list of the block width options: * None * Wide width * Full width ### 󠀁[Options](https://wordpress.org/documentation/article/grid-block/?output_format=md#options)󠁿 The Options button on a block toolbar gives you more features to customize the block. [Read about these and other settings.](https://wordpress.org/documentation/article/more-options/) ## 󠀁[Block settings](https://wordpress.org/documentation/article/grid-block/?output_format=md#block-settings)󠁿 The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button. ![Block settings icon on the editor](https://wordpress.org/documentation/files/2023/ 05/block-settings-icon.png) Click Group, Row, Stack button in the Block Settings to transform the Grid block to each block.  ![Settings icons](https://wordpress.org/documentation/files/2024/08/grid-block-settings- 6.6-300x191.jpg) ### 󠀁[Layout](https://wordpress.org/documentation/article/grid-block/?output_format=md#layout)󠁿 In the Grid block’s Layout settings, you can control how many columns appear in each row. * **Max. columns** – Sets the maximum number of columns the grid can show in one row. * **Min. column width** – Sets the smallest width each column can be before the grid wraps to fewer columns per row. ![Layout settings in the Grid block displaying min and max column inputs. ](https:// wordpress.org/documentation/files/2024/09/grid-block-min-max-layout-settings-e1779252253461. png) Column options Use both settings when you want to cap the number of columns and control when the grid wraps to fewer columns. For example, if Max. columns is 4 and Min. column width is 12rem, the grid can show 4 columns when there is enough space. On narrower screens, it may wrap to 3, 2, or 1 column. ### 󠀁[Position](https://wordpress.org/documentation/article/grid-block/?output_format=md#position)󠁿 The position setting is only available when the Grid block is located at the root- level. The drop-down menu has two options: **Default** and **Sticky**. If the Sticky option is selected, the Grid block will remain at the top of the window when you scroll down the page. ![The position settings for stack block](https://wordpress.org/documentation/files/ 2023/05/position.png) ### 󠀁[Advanced](https://wordpress.org/documentation/article/grid-block/?output_format=md#advanced)󠁿 The Grid block provides the following Advanced settings options: HTML Anchor, Additional CSS Class(es), HTML element, Styles, and Allowed blocks. [Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/) ## 󠀁[Block styles](https://wordpress.org/documentation/article/grid-block/?output_format=md#block-styles)󠁿 Click Styles icon in the block settings sidebar to access the design settings. ![Styles icon in the block settings](https://wordpress.org/documentation/files/2024/ 08/grid-block-styles-6.6-300x269.jpg) ### 󠀁[Color](https://wordpress.org/documentation/article/grid-block/?output_format=md#color)󠁿 The Grid block_ _provides Color settings options to change the text, background, and link colors. For details, refer to this support article: [Color settings overview](https://wordpress.org/documentation/article/colors-settings-overview/) ![Background image options](https://wordpress.org/documentation/files/2024/08/grid- block-background-image-2-6.6-207x300.jpg) ### 󠀁[Background image](https://wordpress.org/documentation/article/grid-block/?output_format=md#background-image)󠁿 The Grid block provides Background Image settings to display behind the block’s content: 1. Click **Add background image** under the **Background Image** in the block’s Styles. 2. Select image from Media Library or Upload an image. 3. You can set Top and/or Left position, and Size from Cover, Contain and Tile. ### 󠀁[Typography](https://wordpress.org/documentation/article/grid-block/?output_format=md#typography)󠁿 The Grid block_ _provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size. For details, refer to this support article: [Typography settings overview](https://wordpress.org/documentation/article/typography-settings-overview/) ### 󠀁[Dimensions](https://wordpress.org/documentation/article/grid-block/?output_format=md#dimensions)󠁿 The Grid_ _block provides dimension settings options to add padding, margin, and block spacing. For details, refer to this support article: [Dimension settings overview](https://wordpress.org/documentation/article/dimension-controls-overview/) ### 󠀁[Border](https://wordpress.org/documentation/article/grid-block/?output_format=md#border)󠁿 The Grid block provides border settings options to add border color, width, and radius. For details refer to this support article: [Border settings overview](https://wordpress.org/documentation/article/border-settings-overview/) ## 󠀁[Changelog](https://wordpress.org/documentation/article/grid-block/?output_format=md#changelog)󠁿 * Updated 2026-05-19 (props to @kjoyner @isabel_brison, @ramonopoly, @joen) - Updated screenshots for WordPress 7.0 release - Added video demonstrating min and max column options - Removed italics - Updated Advanced content section - Updated headings to use sentence casing * Created 2024-08-24 ## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/grid-block/?output_format=md#respond)󠁿 [Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fgrid-block%2F&locale=en_US). If you need support with something that wasn't covered by this article, please post your question in the [support forums](https://wordpress.org/support/forums/). First published September 1, 2024 Last updated May 31, 2026