Grid Block

Grid Block adds a lightweight grid container and nested column block to the WordPress editor. Choose a starting layout, place any blocks inside each column, and adjust column widths for desktop, laptop, tablet, and mobile breakpoints.

Select the Grid Block and open Grid gap in its settings to adjust the column and row spacing independently. Use px, rem, or em units, set either gap to zero, or reset to the original 30px column gutter and 0px row gap. Row spacing also applies when columns stack on smaller screens.

The frontend uses a small local stylesheet and no JavaScript. The plugin does not create options, collect personal data, or contact external services.

Existing content created with Grid Block 1.0.x remains supported. The original grid-block/grid and grid-block/grid-column block names and frontend class names are preserved.

Development

Human-readable block source is included in the src directory.

1. Run npm ci to install the exact JavaScript build tools from the included lockfile.
2. Run npm run build to create production assets in build.

The build requires Node.js 20 or newer and npm 10 or newer. Build tools are development dependencies and are not loaded by WordPress.