説明
Stop guessing how many columns will show on a phone.
Responsive Columns lets you set an exact column count for four breakpoints right inside the core block inspector.
Key features
- Desktop / Tablet-Landscape / Tablet-Portrait / Mobile
Pick 1 – 6 columns for each breakpoint. - Theme-aware gaps
Reads--wp--style--block-gap, lets you tweak Gap X and Gap Y without hard-coding pixels. - Masonry layout for Query Loop (Grid) — one click, zero jQuery.
- Works with core/Columns and core/Post Template (Query Loop Grid).
- Lightweight — one helper class, pure CSS variables; editor JS ≈ 3 kB.
How it works
The plugin adds one class has-s1-rc-columns and these CSS variables:
--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 keeps its own display:grid / flex rules —
only grid-template-columns and gaps are overridden inside media queries.
Deactivate the plugin and everything gracefully falls back to the default block behaviour.
スクリーンショット
Four-column grid on desktop with Responsive Columns panel open. 
Two-column tablet view showing adjusted breakpoints. 
Single-column mobile view after resizing slider.
インストール
- Upload the folder to
/wp-content/plugins/or search “Responsive Columns” in Plugins Add New. - Activate the plugin.
- Select any Columns block (or Query Loop Grid), open the sidebar and find the “Responsive Columns” panel.
FAQ
-
Does it work with Reusable Blocks and Patterns?
-
Yes. Settings are stored as native block attributes, so patterns and reusable blocks keep their responsive values.
-
Will my layout break if I uninstall the plugin?
-
No. The extra attributes are simply ignored and columns revert to the default “stack on mobile”.
評価
このプラグインにはレビューがありません。
貢献者と開発者
“Responsive Columns” をあなたの言語に翻訳しましょう。
開発に興味がありますか ?
変更履歴
1.0.0
- Initial public release — breakpoints, Gap X / Y and Masonry option.