Skip to content

Add Gap width (block spacing) control to the Grid block’s Layout panel #76679

@mathetos

Description

@mathetos

Summary

The Grid block currently doesn't support a way to adjust the gap between grid cells. Block spacing (gap) exists and works for Grid, but the control lives under Styles → Dimensions, so it's easy to miss and doesn't match where users look when editing a grid (Layout: columns, rows, minimum column width, etc.).

This issue asks for a Gap width (or equivalent block spacing) control to be exposed in the Layout panel when the selected block is a Grid layout, so gap is adjustable next to other grid options.

Current behavior

  • Group block → Layout type: Grid.
  • Layout panel shows: layout type (Stack / Row / Grid), Grid item position, Columns (and related grid options). No gap control.
  • Block spacing (gap) is under Styles → Dimensions, so users have to leave the Layout context to change gap.

Desired behavior

  • When Layout type is Grid, the Layout panel should include a Gap width (or "Block spacing") control (single value and/or row/column split, consistent with other layout blocks).
  • Same style.spacing.blockGap attribute and Core layout support; only the placement of the control changes (Layout panel instead of Dimensions for this layout type).

Why this belongs in Core

  • Discoverability: For Grid, gap is a layout concern. Users expect to set columns, rows, and gap in one place (Layout), not gap under Dimensions.
  • Consistency: Row/Stack and other layout types already surface spacing in the layout flow; Grid is the odd one out.
  • Real usage: Grid is used for card layouts, icon grids, etc.; gap is essential and is currently hard to find.

Related issues

Screenshots / Gist

Gist of the concept: https://gist.github.com/mathetos/ce960a5e891f68392e18293f25327739

Screenshot of the Gist in action:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions