A CSS Grid container gives precise, two-dimensional control over where each item sits and how big it is, which makes it possible to build complex layouts like bento grids without stacking multiple nested Flexbox rows.
What It Does
The Container block’s Grid layout type turns the container into a CSS Grid, exposing a Grid Property tab for defining columns, rows, gaps, and alignment, in place of the Flexbox Property tab used by the Flex layout type.
Why It Matters
Flexbox is a one-dimensional layout model; building a true multi-row, multi-column layout with it usually means nesting several Flex containers inside each other. CSS Grid places every item on both axes at once, which is what makes irregular, magazine-style or bento-grid layouts realistic to build without deeply nested containers.
What You Get
A Columns and Rows repeater with per-item Auto/Min-Max/Custom width or height controls, an Auto Flow direction setting, Row/Column/Justify alignment controls, Column Gap and Row Gap spacing, and per-child Grid Item Settings (Simple and Advanced tabs) for placing individual items precisely within the grid.
Benefits
- Grid containers and their child items can be nested (grid-in-grid or flex-in-grid), so complex bento-style layouts are achievable without custom CSS.
- Every alignment and gap control is per-device, so a grid layout can be simplified or restacked on tablet and mobile.
- Grid Item Settings’ Advanced tab exposes the actual grid-column-start/end and grid-row-start/end properties, giving item-level placement control beyond simple ordering.
Capabilities
- Columns / Rows repeaters – add grid tracks with Auto, Min/Max, or Custom width (columns) or height (rows), per device.
- Auto Flow – Rows (fills rows first, creating new rows as needed) or Column (fills columns first, creating new columns as needed).
- Row Alignment (Align Items) – aligns items along the column axis, applied to all grid items.
- Justify Items – aligns items along the row axis, applied to all grid items.
- Column Alignment (Justify Content) – aligns the whole grid within the container along the row axis, when the grid’s total width is less than the container’s.
- Align Content – aligns the whole grid within the container along the column axis, when the grid’s total height is less than the container’s.
- Column Gap / Row Gap – spacing between tracks, per device.
- Grid Item Settings (Simple / Advanced) – per-child column width/row height (Simple) and grid-column/grid-row placement plus Align Items/Justify Content (Advanced).
How It Works
Selecting Grid as the container’s layout type swaps the Flexbox Property tab for a Grid Property tab, while the Layout and Extra Options tabs stay the same set of controls used by Flex containers. Columns and Rows are independent repeaters: Columns controls the container’s grid-template-columns and Rows controls grid-template-rows, and each individual track can be Auto, a Min/Max range, or a fixed Custom size. A container added inside a grid item can itself be set to Grid or Flex from its own Layout tab, which is how nested bento-style grids are built; a Flex child inside a Grid parent shows Flexbox Property instead of Grid Property, and a Grid child inside a Grid parent shows the same Grid Property controls as the parent.
How to Use It
Add the Container block and follow the steps:
1. Select Grid as the container’s layout type.
2. Select the appropriate layout structure.
Layout Tab
This tab exposes the same options available with the Flexbox layout (width, alignment, height, HTML tag, and so on).
Grid Property Tab
3. In the Columns section, open one of the repeater items generated from your selected layout structure.
4. Set that column’s per-device width using Auto (auto width), Min/Max (a minimum and maximum width), or Custom (an exact width). Click + Add Columns for more column items.
5. Repeat the same process in the Rows section (Auto, Min/Max, or Custom height, per device), using + Add Rows for more row items.
6. Set Auto Flow to Rows (fill rows first) or Column (fill columns first).
7. Use Row Alignment (Align Items) and Justify Items to align items on the column and row axes.
8. If the grid’s total size is smaller than the container, use Column Alignment (Justify Content) and Align Content to position the whole grid within the container.
9. Set Column Gap and Row Gap for spacing between tracks.
Extra Options Tab
This tab exposes the same options available in the Flexbox layout. Once configured, add other blocks inside the grid items.
Add a Child Grid Container
You can also add a grid container inside a grid item. Add the Container block inside a grid item, then from its own Layout tab select Grid (or Flex, if the child should be a Flexbox container instead).
From Width, Height, and Overflow, set the child container’s own sizing and overflow behavior, and use HTML Tag to change its rendered element. Its Grid Property tab carries the same options as the parent (or a Flexbox Property tab, if Flex was selected instead).
Grid Item Settings
From the Simple tab, set the child’s column width and row height. From the Advanced tab, place the item precisely using grid-column-start, grid-column-end, grid-row-start, and grid-row-end, and use Align Items and Justify Content for that item’s own alignment.
Use Cases
- A bento-grid style feature section with items of different sizes arranged in a single layout
- A dashboard-style page layout where widgets need exact row/column placement rather than a simple wrapped row
- A nested grid-inside-grid layout for a complex portfolio or magazine-style homepage section
Limitations
- Once a Container is created, its layout type (Flex or Grid) can be changed later from the Layout tab, but the Columns/Rows structure built for one type does not carry over automatically to the other.
- A reported case (ticket #18398) noted there is no dedicated visual label distinguishing a Flex container from a Grid container in the block list; both currently list simply as “Container,” so check the Layout tab’s layout-type setting directly rather than relying on the block name.
- Grid Item Settings’ Advanced placement (grid-column/row start/end) assumes some familiarity with CSS Grid line numbering; it is not a drag-and-drop visual placement tool.
Troubleshooting
- You can’t tell whether a container in the block list is a Flex or a Grid container: matches a reported case (ticket #18398); open the container and check its Layout tab’s layout-type setting, since both currently share the same block name in the editor.
- An item does not land where expected after setting grid-column/row start and end: confirm the values reference actual grid line numbers created by your Columns/Rows repeater items, not arbitrary numbers; adding more Column or Row items increases the number of available grid lines.
- Row Alignment or Justify Items does not seem to change anything: these apply to all grid items at once; if a specific item still looks unaligned, check that item’s own Grid Item Settings (Advanced tab), since a per-item Align Items/Justify Content value there overrides the parent’s grid-wide setting.
