Title: Responsive Columns Author: Specia1ne Published: May 14, 2025 Last modified: October 27, 2025 --- Search plugins ![](https://ps.w.org/responsive-columns/assets/icon-256x256.png?rev=3293306) # Responsive Columns By [Specia1ne](https://profiles.wordpress.org/specia1ne/) [Download](https://downloads.wordpress.org/plugin/responsive-columns.1.1.1.zip) * [Details](https://pcd.wordpress.org/plugins/responsive-columns/#description) * [Reviews](https://pcd.wordpress.org/plugins/responsive-columns/#reviews) * [Installation](https://pcd.wordpress.org/plugins/responsive-columns/#installation) * [Development](https://pcd.wordpress.org/plugins/responsive-columns/#developers) [Support](https://wordpress.org/support/plugin/responsive-columns/) ## Description > **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 * [[ * 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 1. Upload the plugin folder to `/wp-content/plugins/` or search “Responsive Columns” in _Plugins Add New_. 2. Activate the plugin. 3. Select a **Columns** block or **Query Loop Grid**, open the sidebar, and expand the **Responsive Columns** panel. ## FAQ ### Does it work with Reusable Blocks and Patterns? Yes. Responsive settings are saved as native block attributes and persist across reusable blocks, synced patterns, and template parts. ### Will my layout break if I uninstall the plugin? No. Extra attributes are ignored by core blocks once the plugin is removed. Your content reverts to the default responsive behaviour (stacking on smaller screens). ## 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 * [ Specia1ne ](https://profiles.wordpress.org/specia1ne/) [Translate “Responsive Columns” into your language.](https://translate.wordpress.org/projects/wp-plugins/responsive-columns) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/responsive-columns/), check out the [SVN repository](https://plugins.svn.wordpress.org/responsive-columns/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/responsive-columns/) by [RSS](https://plugins.trac.wordpress.org/log/responsive-columns/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.1 * **Fixes & Defaults:** “Reset responsive settings” now restores gap values directly from the active theme (`theme.json`). New blocks initialize with the correct default gap from the theme or a reliable fallback (`24px`). * **UX Improvements:** Column and row gaps now stay synchronized consistently when linked (X Y). Editor controls always display real pixel values based on the theme rather than placeholders. * **Masonry Guard:** Added a responsive validation layer that only enables Masonry for valid Query Loop grid layouts. The toggle now includes clear inline guidance and automatic reset behavior when prerequisites are not met. #### 1.1.0 * **Security & Stability:** Reworked the HTML filter to use `WP_HTML_Tag_Processor` instead of regex, ensuring safe and predictable markup updates. Hardened asset loading — scripts now read dependencies and versions directly from `index.asset. php` with graceful fallbacks. * **Quality & Performance:** Optimized front-end Masonry with clamped gap values, rate-limited resize handling, and automatic observer cleanup to prevent layout thrashing. Streamlined attribute updates in the editor inspector, reducing redundant renders and simplifying logic. * **Accessibility & i18n:** Added clearer screen-reader descriptions for gap sliders and improved help text for Masonry controls. Verified full localization support. #### 1.0.0 * Initial public release — breakpoints, gap controls, and Masonry option. ## Meta * Version **1.1.1** * Last updated **5 months ago** * Active installations **50+** * WordPress version ** 6.4 or higher ** * Tested up to **6.8.5** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/responsive-columns/) * Tags * [block-editor](https://pcd.wordpress.org/plugins/tags/block-editor/)[columns](https://pcd.wordpress.org/plugins/tags/columns/) [css grid](https://pcd.wordpress.org/plugins/tags/css-grid/)[gutenberg](https://pcd.wordpress.org/plugins/tags/gutenberg/) [responsive](https://pcd.wordpress.org/plugins/tags/responsive/) * [Advanced View](https://pcd.wordpress.org/plugins/responsive-columns/advanced/) ## Ratings No reviews have been submitted yet. [Add my review](https://wordpress.org/support/plugin/responsive-columns/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/responsive-columns/reviews/) ## Contributors * [ Specia1ne ](https://profiles.wordpress.org/specia1ne/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/responsive-columns/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://specia1ne.com)