Description
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.
- Run
npm cito install the exact JavaScript build tools from the included lockfile. - Run
npm run buildto create production assets inbuild.
The build requires Node.js 20 or newer and npm 10 or newer. Build tools are development dependencies and are not loaded by WordPress.
Screenshots
Blocks
This plugin provides 2 blocks.
- Grid Block Create a responsive 12-column layout.
- Grid Column A responsive column within Grid Block.
Installation
- Install Grid Block from the WordPress plugin directory, or upload the
grid-blockdirectory to/wp-content/plugins/. - Activate Grid Block from the Plugins screen.
- Add the Grid Block from the Design category in the block inserter.
FAQ
-
Does Grid Block load JavaScript on the frontend?
-
No. Grid Block loads only its layout stylesheet on pages where the block is used.
-
Will existing Grid Block content keep working?
-
Yes. Version 1.2.0 preserves the existing block names and public CSS classes. Deprecated serializers keep content from versions 1.0.x and 1.1.x editable while native alignment and anchor properties are applied on save.
-
Does the plugin use an external service?
-
No. Grid Block does not make external requests or collect telemetry.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Grid Block” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Grid Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.2.1
- Fixed gap fields restoring their defaults while values are being typed. Values now commit on blur or Enter.
- Made newly added columns stack on mobile while preserving existing column settings.
- Made the initial layout picker respect insertion locks inherited from parent blocks.
1.2.0
- Updated the editor integration for WordPress 7.1, including its iframe editor.
- Added independent column and row gap controls, with zero spacing, px/rem/em units, and reset.
- Separated the Add column row from content inserters to prevent overlapping controls.
- Preserved wide/full alignment and HTML anchors when saving older content.
- Fixed mobile stacking for auto columns and responsive auto width overrides.
- Enabled adding columns within grids and improved horizontal block movement.
- Modernized block registration and conditional asset loading, with WordPress 6.6 and 6.7 compatibility.
- Fixed responsive size inheritance and translated width labels.
- Improved layout-picker and inspector-control accessibility.
- Preserved Grid Block 1.0.x block names and saved-content compatibility.
1.0.6
- Added vertical alignment support.
1.0.5
- Fixed full-width alignment styling.
1.0.4
- Added horizontal column alignment.
1.0.3
- Removed the fixed container width.
1.0.2
- Removed frontend JavaScript.
1.0.0
- Initial release.