Title: Responsive Columns
Author: Specia1ne
Published: <strong>Èbìbí  14, 2025</strong>
Last modified: Ọ̀wàrà 27, 2025

---

Ṣàwárí àwọn plugin

![](https://ps.w.org/responsive-columns/assets/icon-256x256.png?rev=3293306)

# Responsive Columns

 Láti ọwọ́ [Specia1ne](https://profiles.wordpress.org/specia1ne/)

[Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/responsive-columns.1.1.1.zip)

 * [Àwọn àlàyé](https://yor.wordpress.org/plugins/responsive-columns/#description)
 * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/responsive-columns/#reviews)
 *  [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/responsive-columns/#installation)
 * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/responsive-columns/#developers)

 [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/responsive-columns/)

## Àpèjúwe

> **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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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.

## Àwọn àwòrán ìbòjú

 * [[
 * Four-column grid on desktop with Responsive Columns panel open.
 * [[
 * Two-column tablet view showing adjusted breakpoints.
 * [[
 * Single-column mobile view after resizing slider.

## Ìgbéwọlẹ̀

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

## Àwọn àgbéyẹ̀wò

Kò sí àwọn àgbéyẹ̀wò fún plugin yìí.

## Àwọn Olùkópa & Olùgbéejáde

“Responsive Columns” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe
ìkópa sí plugin yìí.

Àwọn Olùkópa

 *   [ Specia1ne ](https://profiles.wordpress.org/specia1ne/)

[Túmọ̀ “Responsive Columns” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/responsive-columns)

### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?

[Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/responsive-columns/), 
ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/responsive-columns/),
tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/responsive-columns/)
nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/responsive-columns/?limit=100&mode=stop_on_copy&format=rss).

## Àkọsílẹ̀ àwọn àyípadà

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

## Àkójọpọ̀ Meta

 *  Ẹ̀yà **1.1.1**
 *  Ìgbàgbọ́hùn tó kẹ́yìn **oṣù 5 sẹ́yìn**
 *  Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **50+**
 *  Ẹ̀yà WordPress ** 6.4 tàbí ju bẹ́ẹ̀ lọ **
 *  Dánwò dé **6.8.5**
 *  Ẹ̀yà PHP ** 7.4 tàbí ju bẹ́ẹ̀ lọ **
 *  Èdè
 * [English (US)](https://wordpress.org/plugins/responsive-columns/)
 * Àwọn àmì
 * [block-editor](https://yor.wordpress.org/plugins/tags/block-editor/)[columns](https://yor.wordpress.org/plugins/tags/columns/)
   [css grid](https://yor.wordpress.org/plugins/tags/css-grid/)[gutenberg](https://yor.wordpress.org/plugins/tags/gutenberg/)
   [responsive](https://yor.wordpress.org/plugins/tags/responsive/)
 *  [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/responsive-columns/advanced/)

## Àwọn ìbò

Kò sí ìwádìí tí a tíì fi ránṣẹ́.

[Add my review](https://wordpress.org/support/plugin/responsive-columns/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/responsive-columns/reviews/)

## Àwọn Olùkópa

 *   [ Specia1ne ](https://profiles.wordpress.org/specia1ne/)

## Ìrànlọ́wọ́

Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́?

 [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/responsive-columns/)

## Ṣe ìtọrẹ

Ṣé o fẹ́ ṣe àtìlẹ́yìn fún ìlọsíwájú plugin yìí?

 [ Ṣe ìtọrẹ sí plugin yìí ](https://specia1ne.com)