Kay Belardinelli

<p>Columns of text that stretch to fit, with easy-to-use shortcodes.</p>
<h3>Shortcodes</h3>
<p>Wrap around a region of text to create a container:<br />
[mgc][/mgc]</p>
<p>Wrap around each element you’d like to be a column:<br />
[col][/col]</p>


Magicolumns

Columns of text that stretch to fit, with easy-to-use shortcodes.

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>


Responsive Columns

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

Magicolumns vs Responsive Columns