Description
Stop guessing how many columns will show on a phone.
Responsive Columns lets you set an exact column count for four breakpoints right inside the core block inspector.
Key features
- Desktop / Tablet-Landscape / Tablet-Portrait / Mobile
Pick 1 – 6 columns for each breakpoint. - Theme-aware gaps
Reads--wp--style--block-gap, lets you tweak Gap X and Gap Y without hard-coding pixels. - Masonry layout for Query Loop (Grid) — one click, zero jQuery.
- Works with core/Columns and core/Post Template (Query Loop Grid).
- Lightweight — one helper class, pure CSS variables; editor JS ≈ 3 kB.
How it works
The plugin adds one class has-s1-rc-columns and these CSS variables:
--s1-rc-columns-mobile-portrait
--s1-rc-columns-mobile-landscape
--s1-rc-columns-tablet-portrait
--s1-rc-columns-tablet-landscape
--s1-rc-columns-desktop /* auto-added for Masonry /
--s1-rc-gap-x / horizontal /
--s1-rc-gap-y / vertical, falls back to X */
Your theme keeps its own display:grid / flex rules —
only grid-template-columns and gaps are overridden inside media queries.
Deactivate the plugin and everything gracefully falls back to the default block behaviour.
Screenshots
Four-column grid on desktop with Responsive Columns panel open. 
Two-column tablet view showing adjusted breakpoints. 
Single-column mobile view after resizing slider.
Installation
- Upload the folder to
/wp-content/plugins/or search “Responsive Columns” in Plugins Add New. - Activate the plugin.
- Select any Columns block (or Query Loop Grid), open the sidebar and find the “Responsive Columns” panel.
FAQ
-
Does it work with Reusable Blocks and Patterns?
-
Yes. Settings are stored as native block attributes, so patterns and reusable blocks keep their responsive values.
-
Will my layout break if I uninstall the plugin?
-
No. The extra attributes are simply ignored and columns revert to the default “stack on mobile”.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Responsive Columns” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Responsive Columns” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial public release — breakpoints, Gap X / Y and Masonry option.