block group block variation grid

WordPress 6.3では、まだコアに実装されていないGutenberg のブロックです。

emulsion 2.7.6 +

グループブロックのブロックバリエーションに、gridが追加できるようになり、より複雑な表現が可能になりつつあります。

以下の例は、グループグリッドとギャラリーブロックを組み合わせたものですが、今まではあきらめていたような、複雑な表現も簡単に実現できるようです。

グループブロックのブロックバリエーション「グリッド」は、Gutenberg 15.9.0 ではまだ実験的機能です。グーテンベルグ設定「実験中」で以下を有効にする必要があります。

Site Editor block grid

emulsion テーマで、グリッドの適用例

フロントエンドでは、ちょっと表示が異なります。

狙った表示というよりも、表示がおかしくならないようちょっと調整という感じです。

use grid in Custom Html

HTML

<section id="page" class="alignwide" style="margin:1.5rem auto;">
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>
  <main>メイン領域</main>
  <footer>フッター</footer>
</section>

CSS

Add custom field name css

value below.

.content-box {
  column-count: 3;
  gap: 40px;
}
#page {
  display: grid;
  height: 400px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
padding:0;
margin:0;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Result

ヘッダー

メイン領域