See exactly how many columns appear on every device. Responsive Columns extends the core Columns block and the Query Loop (grid) template with precise controls for four breakpoints, X/Y gap management, and an optional Masonry layout.
Key features
- Four responsive breakpoints. Fine-tune Desktop, Tablet landscape, Tablet portrait, and Mobile column counts (1–6 columns).
- Theme-aware gaps. Uses your theme』s block gap as a starting point and lets you override horizontal and vertical spacing independently.
- One-click Masonry for Query Loop (Grid). No jQuery, automatically reflows posts as your content changes.
- Native block experience. Works directly inside core/Columns and core/Post Template (grid) so patterns, reusable blocks, and theme.json continue to work.
- Lightweight. Modern ES modules (~4 kB compressed) and CSS custom properties. Editor assets load only when needed.
How it works
The plugin adds a has-s1-rc-columns class and a handful of CSS custom properties:
--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』s layout styles stay in control — Responsive Columns only adjusts grid-template-columns and gap values inside media queries. Disable or uninstall the plugin and the columns fall back to WordPress defaults without leaving orphan styles behind.
Editor experience
- Inspector panel with device icons, tooltips, and numeric inputs for precise values.
- Theme gap detection with a reset button to restore defaults in one click.
- Gap linking lets you mirror vertical spacing or split it into a custom row gap.
- Masonry toggle explains prerequisites (Query Loop + Grid layout with a desktop column count).
Accessibility & localisation
- All UI controls are keyboard accessible and include human-readable labels.
- Strings are translation ready via the
responsive-columnstext domain and JSON translation support.
