Adaptive column counts, gap controls, and Masonry layouts for core Columns and Query Loop blocks — no custom blocks required.

Themeover

DivUp Content

Wrap divs around classic editor content using divup shortcodes. Also works for Gutenberg, but you may prefer to use the group block.

George Nicolaou

picsta

GM Adaptive CSS Grid Columns

Allows you to create Adaptive CSS Grid Columns

Specia1ne

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


Alternatives to Responsive Columns

Top alternatives