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.

George Nicolaou

picsta

<p>Who can benefit from the plugin GM Adaptive CSS Grid Columns? (Short: GM Grid)<br />
The plugin is made to help everyone who wants to have an easy, lightweight and worry-free solution to set up a maximum grid count on their website.<br />
Of course, you can have fewer columns as those you have defined. They will automatically take the right percentage like 33.3%, 50% or even 100% of the available width.</p>
<h3>Do I have to know CSS?</h3>
<p>Absolutely not! Especially beginners and non-coders will start to love this plugin soon.</p>
<h3>Hold on, not another plugin, what happens to my page speed?</h3>
<p>Don’t panic, we took care of this by keeping this plugin lightweight and the CSS is minified by default.</p>
<h3>Important Notice:</h3>
<p>The plugin only works if you correctly identify and target the parent, and it’s direct child elements. Otherwise, the plugin can’t work.<br />
Recommended page builder are Bricks, Oxygen and Breakdance.</p>
<h3>How to use:</h3>
<p>The setup is quite simple. Basically, you just add two CSS classes to your elements and the plugin does the magic for you.<br />
Make sure to add the following classes to the container and direct child elements. Use a DIV instead of a section, container, or block<br />
to avoid conflicting predefined styles.</p>
<p>Parent/Container Element class: grid-container<br />
Child Element class: grid-item</p>
<p>Additionally, there is one more CSS class available. By using grid-center on your parent (container) element, you achieve three things.<br />
1. The container will be centred on the page<br />
2. Add your desired width (in rem)<br />
3. Add horizontal spacing across all break points</p>
<h3>Minimum Setup:</h3>
<ol>
<li>Define the maximum column count for your medium and large screen size.</li>
<li>Add the desired gap size (in rem)</li>
<li>Define the medium and large breakpoint (in em).<br />
Save!</li>
</ol>
<p><strong>Quick overview of GM Adaptive CSS Grid Columns by <a href="https://websquadron.co.uk/" rel="nofollow ugc">Imran Siddiq</a></strong></p>
<p><iframe loading="lazy" title="FREE Responsive Columns Plugin - GM Adaptive CSS Grid Columns - BricksBuilder Oxygen Breakdance Web" width="750" height="422" src="https://www.youtube.com/embed/lDibIKlmyv4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>Translations</h3>
<p>GM Adaptive CSS Grid Column can be used in these different languages thanks to the following translators:</p>
<ul>
<li>Afrikaans <a href="https://www.georgenicolaou.me/" rel="nofollow ugc">George Nicolaou</a></li>
<li>German <a href="https://profiles.wordpress.org/picsta/" rel="nofollow ugc">Michael Kellersmann</a></li>
<li>Greek <a href="https://www.georgenicolaou.me/" rel="nofollow ugc">George Nicolaou</a></li>
</ul>


GM Adaptive CSS Grid Columns


This is an awesome plugin especially with a page builder like bricks / breakdance, etc. to easily and quickly bring in the use of CSS grid. This is how it should be implemented and find using GM grid a real time saver. 😎 


Very easy to use and implement Grid CSS

Allows you to create Adaptive CSS Grid Columns

Responsive Columns vs GM Adaptive CSS Grid Columns