Layout Grid Block


カラム幅や位置を簡単にカスタマイズできる、カラムベースのレイアウトを作成したい時や、投稿全体のグローバルなレイアウトグリッドに合わせてコンテンツを配置したい時、この Layout Grid (レイアウトグリッド) ブロックを使って実現できます。また、モバイルやタブレットのブレイクポイントによって特定のレイアウトを提供するオプションもあります。1から4までの列の数を選び、どの画面にも対応するように各列のサイズを変更して配置できます。オプションで、背景色やパディングを適用して強調することもできます。


GitHub レポジトリで開発をフォローしたり、issue を作成したり、機能を提案したり、ソースを見たりすることができます。


  • グリッドレイアウトセレクタ。
  • リサイズハンドル付きの3列グリッド。



  • Layout Grid A Gutenberg container block to let you align items consistently across a global grid.


we definitive need this in core! the default columns in gutenberg are crap.
Thank you, nice and helpful! little advice: Add to tags "Gutenberg" in description. I didn't find you quickly. In the beginning i was looking for something like this by tag #Gutenberg
One of my (very, very few) essential plugins for WP. It makes building layout a breeze. I made my own fork and build though, to make some changes: -I changed the basic gutter values to CSS variables, so now I can use my own values. -I changed to media queries as well, for my setup. -I changed the editor visually a bit, to make it look like an editor, see columns etc, but that's just a personal preference. And what I couldn't do, but would be nice to have, to change the order of columns, and the number of rows on mobile/tablet, when it starts collapsing. But again, it's essential, and should be part of core WP. Thanks guys!
Very nice approach. Keep it up.
Started using this block layout on a site as it was just there by default, then when I realised it wasn't available on my WordPress sites, I had to go get it. Very handy layout...


Layout Grid Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。


“Layout Grid Block” は19ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Layout Grid Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。


1.7 – 13th July 2021

  • Add initial support for WordPress mobile app
  • Fix incorrect behaviour of drag handles in Safari
  • Fix sticky block styles
  • Fix image right alignment

1.6 – 26th March 2021

  • Remove deprecated Gutenberg functions
  • Restore hyphenation behaviour to 1.3 – it caused too many issues
  • Remove Firefox fix in 1.2.4 which no longer seems to be needed and causes other issues
  • Merge front.css into style.css
  • Force grid preview to be desktop mode, to improve appearance in pattern inserter

1.5 – 8th February 2021

  • Improve editor responsive behaviour on smaller devices
  • Bump minimum WordPress version to 5.6

1.4 – 15th January 2021

  • Use hyphenation for text inside a grid column
  • Add missing has-background for columns with a custom background colour
  • Fix CSS for use in full site editor

1.3 – 21st July 2020

  • Add vertical alignment to grid and grid columns
  • Mirror grid device breakpoint with editor preview breakpoint (requires WP 5.5 or Gutenberg plugin)
  • Bump minimum WordPress version to 5.5

1.2.4 – 14th July 2020

  • Fix some blocks breaking outside of the grid in Firefox
  • Fix editor margins for some themes

1.2.3 – 29th June 2020

  • Fix some styles not loading in the editor

1.2.2 – 23rd June 2020

  • Fix the CSS loading fix from 1.2.1 so it uses wp_register_style

1.2.1 – 10th June 2020

  • Fix block inserter to show inside a grid column
  • Fix vertical margin in editor so it better matches the display
  • Fix CSS loading so it is only added when block is used
  • Fix grid lines appearing when inner block is selected

1.2 – 29th April 2020

  • Move the selected breakpoint to the toolbar and allow it to be toggled
  • Bump minimum WordPress version to 5.4
  • Improve drag handle behaviour
  • Fix multi-select inside grid blocks
  • Fix output of grid front-end CSS
  • Fix issue with sizing being off when full-wide
  • Fix old classes being added when column layout changes

1.1 – 10th March 2020

  • Add option to disable start and end gutters for full-bleed layout
  • Add option to control gutter size
  • Fix a Firefox 100% height bug when multiple blocks are inside one column
  • Improve IE11 support

1.0.5 – 28th January 2020

  • Fix editor layout issues with themes that don’t support Gutenberg

1.0.4 – 21st January 2020

  • Fix layout issues with Gutenberg 7.3

1.0.3 – 12th December 2019

  • Fix grid values being ignored in the 7.1.0 editor
  • Fix cropping of grid when inside a group block

1.0.2 – 28th November 2019

  • Fix a bug with duplicate column spans

1.0.1 – 26th November 2019

  • Fix problem with edit history putting the block into an inbetween state
  • Fix cropping of the grid in the editor

1.0 – 7th November 2019

  • Initial release