Responsive Columns

Adds per-device column counts, Gap X/Y and optional Masonry to core Columns & Query Loop — no extra blocks or CSS.

Author:Specia1ne (profile at wordpress.org)
WordPress version required:6.4
WordPress version tested:6.8.3
Plugin version:1.1.1
Added to WordPress repository:14-05-2025
Last updated:27-10-2025
Rating, %:0
Rated by:0
Plugin URI:https://wordpress.org/plugins/responsive-colu...
Total downloads:644
Active installs:50+
plugin download
Click to start download

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.
Screenshots
FAQ
ChangeLog