2024年7月16日にリリースされたWordPress6.6では、多くの新機能が追加されました。その中でも私が特に注目したのが、「グリッドブロック」です。このブロックは、CSSのグリッドレイアウトに基づいており、自由なデザインを簡単に作成できることが特徴です。複数の要素を整理して配置できるため、見た目にも美しい仕上がりが実現します。この手法は「Bento Grid」や「Bento Layout」とも呼ばれ、弁当のように区分けされた構成が可能です。
この記事では、グリッドブロックの使い方を簡単に解説し、その活用例を紹介します。
グリッドブロックのレイアウト設定
グリッドブロックのレイアウト設定では、まずカラム数を指定する必要があります。指定方法には、以下の２つの選択肢があります。
- 自動設定：最小列幅を「自動」で設定することで、画面サイズに応じてカラムが調整されます
- 手動設定：カラム数を「手動」で指定することも可能です。手動で設定することで、より細かい調整が可能となります
さらに、グリッドブロック内に配置された各ブロックのサイズ（列のスパンや行のスパン）を調整することで、グリッドレイアウトを自由にカスタマイズできます。これにより、複雑なデザインや特定のレイアウトを簡単に作成できるようになります。
参考リソース
詳細な使い方や設定方法については、以下の公式ドキュメントを参考にしてください。
グリッドブロックの使用例
基礎編の課題２に関連するよくある質問のひとつに、「３つの画像をきれいに配置したい」というものがあります。この課題に対する解決策として、私の提案は「グリッドブロック内にカバーブロックを配置する」という方法です。
カバーブロックを使用すると、画像を背景画像（background-image）として設定できるため、HTML要素のサイズにフィットするように画像が自動的に調整されます。この方法を使うことで、画像がきれいに表示されるだけでなく、カバーブロック内に段落やボタンなどの他のブロックを配置してカスタマイズすることも可能です。
この使用例では、グリッドブロック内に３つのカバーブロックを配置し、画像付きのレイアウトを作成しています。
ブロックを以下のように設定することで、見た目に美しく、機能的なレイアウトが完成します。特に、異なるサイズの画像を使う場合でも、それぞれの要素が整然と並ぶようになります。
- グリッドブロック
- 設定：レイアウト → 手動 → カラム → 2
- カバーブロック
- ツールバー：コンテンツ位置 → 中央下
- 左側のカバーブロック
- スタイル：サイズ → 列のスパン → 2、カバー画像の最小高さ → 400px
- 右側のカバーブロック
- スタイル：サイズ → カバー画像の最小高さ → 200px
- ボタンブロック
- 設定：レイアウト → 配置 → 中央揃え
参考記事
その他の使用例ついては、以下の参考記事もご覧ください。VK Blocks がインストールされていると、グループブロック（縦積み）全体にリンクを設定することができるそうです：
まとめ
WordPress 6.6で新たに追加されたグリッドブロックは、複雑なレイアウトを簡単に作成できる強力なツールです。カラム数やサイズの調整を行うことで、自由自在なデザインが可能になり、特に画像の配置や要素の整理が必要な場面でその力を発揮します。この記事で紹介したような使い方を参考に、ぜひご自身のサイトでグリッドブロックを活用してみてください。
