Responsive Columns

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-columns text domain and JSON translation support.