Description

Responsive Columns extends native Gutenberg layout blocks with practical breakpoint controls for desktop, tablet, and mobile. It adds responsive columns and flexible gap controls to core/Columns, core/Gallery, and Query Loop grids while keeping the original blocks, markup, and desktop behavior intact.

For more advanced layouts, the plugin also adds tablet-aware Custom widths for asymmetric core/Columns designs, native Query Loop auto-fit support, and optional Masonry for supported fixed-column layouts.

Key features

Five responsive breakpoints, including Desktop, tablet, and mobile.
Responsive columns for core/Columns, core/Gallery, and Query Loop grids.
Shared breakpoint switching for layout and gap controls.
Flexible Gap units with px, rem, and em support.
Custom widths mode for asymmetric core/Columns layouts.
Per-column responsive Width and simple Order controls for advanced core/Columns layouts.
Tablet-aware width inheritance for Custom widths, with safer 100% defaults on phone breakpoints.
Native Query Loop Grid item position integration for Manual and Auto layouts.
Minimum column width support for Query Loop grids in Auto mode.
Optional Masonry for supported fixed-column core/Columns and Query Loop layouts.
Theme-aware defaults and lightweight output based on CSS custom properties.

How it works

The plugin adds a has-s1-rc-columns class and a small set 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
--s1-rc-gap-x
--s1-rc-gap-y

Your theme stays in control of the base layout. Responsive Columns only adjusts the number of columns and gaps at the configured breakpoints. If the plugin is removed, the blocks fall back to their normal WordPress behavior without leaving custom block markup behind.

Editor experience

Responsive controls live inside the block inspector with a shared breakpoint selector.
Core/Columns can switch between equal-width responsive columns and Custom widths for per-column overrides.
Custom widths inherits through tablet breakpoints while phone breakpoints stay at 100% width until you customize them.
Native Gallery keeps its desktop baseline while gaining practical tablet and mobile overrides.
Query Loop auto-fit follows the native Grid item position setting instead of duplicating it.
Gap defaults are pulled from the active theme when possible.
Gap controls support px, rem, and em while keeping reset and inheritance behavior predictable.
Masonry availability is validated against the active breakpoint before it can be enabled.
Local reset actions restore responsive values back to active theme defaults.

Accessibility and localization

Inspector controls are keyboard accessible and labeled for screen readers.
Strings are translation-ready via the responsive-columns text domain.

Screenshots

Query Loop grid in Manual mode with shared responsive Columns and Gap controls.
Query Loop grid in native Auto mode with Minimum column width, Gap, and Masonry guidance.
Tablet breakpoint override for Query Loop columns with inherited gap values.
Parent core/Columns controls in Custom widths mode with per-breakpoint gap settings.
Child Responsive Column controls with custom width and order overrides for asymmetric layouts.
Gallery responsive controls with tablet columns and theme-aware gap settings.

Installation

Upload the plugin folder to /wp-content/plugins/ or install Responsive Columns from the WordPress plugin directory.
Activate the plugin.
Select a Columns block, Gallery block, or a Query Loop using the grid layout, then open the Responsive Columns panel in the sidebar.

FAQ

Does it work with reusable blocks and patterns?: Yes. Settings are stored as native block attributes, so they remain with reusable blocks, synced patterns, and template parts.
Will layouts break if I uninstall the plugin?: No. WordPress ignores the extra attributes after the plugin is removed, so content falls back to the default responsive behavior.
Can I use rem or em values for gap controls?: Yes. Gap and Row gap support px, rem, and em, while older saved px values remain fully compatible.
Does it depend on a specific theme?: No. The plugin extends native core blocks and keeps the active theme in charge of layout styles and spacing tokens.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Responsive Columns” is open source software. The following people have contributed to this plugin.

Specia1ne

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.6.0

Added responsive column controls for native core/gallery blocks.
Added responsive Gap support for galleries with px / rem / em.
Added gallery editor preview for tablet and mobile breakpoints.
Added smarter gallery defaults that stay closer to native desktop behavior.
Kept native gallery desktop layouts intact while extending smaller breakpoints.

1.5.1

Added tablet-only width inheritance for Custom widths in core/Columns layouts.
Kept phone breakpoints at 100% width by default until you explicitly customize them.
Added Reset for per-breakpoint Order controls on individual Column blocks.
Improved Custom widths helper text and responsive column inspector flow.

1.5.0

Added Custom widths mode for core/Columns responsive layouts.
Added per-column responsive Width controls for tablet and mobile breakpoints.
Added simple per-breakpoint Order controls with Default, First, and Last.
Kept standard parent Columns controls focused on equal-width responsive layouts while custom widths handles asymmetric layouts.
Improved front-end and editor rendering for custom-width core/Columns layouts with reliable gap behavior.

1.4.1

Added px / rem / em support for Gap and Row gap.
Improved spacing controls to match the shared inline workflow used by Minimum column width.
Preserved direct theme gap values from theme.json when they use px, rem, or em.
Kept fallback handling for theme spacing variables predictable in the editor.

1.4.0

Added native Query Loop Grid item position integration for Manual and Auto layouts.
Added Minimum column width support for Query Loop grids in Auto mode.
Added front-end and editor auto-fit rendering for responsive Query Loop grids.
Improved Query Loop column controls to match native desktop behavior while keeping responsive overrides practical.
Added stronger Masonry guardrails and clearer notices for auto-fit and one-column states.
Refined Query Loop inspector copy and layout for a cleaner editing flow.

1.3.0

Added one shared breakpoint switcher for Columns and Gap controls, including Desktop.
Added responsive gap inheritance with per-breakpoint overrides and clearer helper text.
Added smarter local reset actions for columns and gap controls inside the inspector.
Refined the inspector layout, labels, and section spacing for a cleaner editing flow.
Added bundled translations and proper PHP/JS localization loading for editor strings.

1.2.0

Hardened front-end gap sanitization with safer CSS value validation.
Improved theme gap detection for theme.json preset and custom CSS variable formats.
Fixed editor preview selectors so responsive styles target only supported blocks.
Improved Masonry stability during image loading, resize events, and dynamic content updates.
Registered shared front-end styles per supported block instead of loading them globally.
Cleaned up project metadata for ongoing maintenance and future releases.

1.1.1

Reset responsive settings now restores gap values directly from the active theme.
New blocks initialize with the correct default gap from the theme or a reliable fallback (24px).
Column and row gaps stay synchronized consistently when linked.
Editor controls now display real pixel values based on the theme rather than placeholders.
Added a validation layer that only enables Masonry for valid Query Loop grid layouts.

1.1.0

Reworked the HTML filter to use WP_HTML_Tag_Processor instead of regex.
Hardened asset loading by reading script dependencies from index.asset.php with graceful fallbacks.
Optimized Masonry with clamped gap values, rate-limited resize handling, and observer cleanup.
Improved accessibility text for gap sliders and Masonry controls.

1.0.0

Initial public release.