ベントーグリッドレイアウトのCSS Grid実装

大小のタイルを敷き詰めるトレンドのベントーグリッドをCSS Gridで実装。機能紹介セクションやサービスサイトのファーストビューに最適な非対称タイルレイアウトです。

プレビュー

tile-1

tile-2

tile-3

tile-4

tile-5

tile-6

tile-7

HTML

<div class="grid-container">
  <div class="item-1">tile-1</div>
  <div class="item-2">tile-2</div>
  <div class="item-3">tile-3</div>
  <div class="item-4">tile-4</div>
  <div class="item-5">tile-5</div>
  <div class="item-6">tile-6</div>
  <div class="item-7">tile-7</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  height: 500px;
}

.item-1 { grid-area: 1 / 1 / 3 / 3; }
.item-2 { grid-area: 1 / 3 / 2 / 5; }
.item-3 { grid-area: 2 / 3 / 3 / 4; }
.item-4 { grid-area: 2 / 4 / 3 / 5; }
.item-5 { grid-area: 3 / 1 / 4 / 2; }
.item-6 { grid-area: 3 / 2 / 4 / 4; }
.item-7 { grid-area: 3 / 4 / 4 / 5; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}

このレイアウトの解説

ベントー（弁当）グリッドは、日本の弁当箱のように大小の仕切りでコンテンツを敷き詰めるレイアウトで、AppleやLinearをはじめとするモダンなサービスサイトで多用されています。CSS Gridのgrid-columnとgrid-rowで各タイルのspanを明示的に指定することで、主役の大タイルと脇を固める小タイルを自由に組み合わせられます。本プリセットでは左上に2×2の大タイルを置き、その周囲を横長タイルと正方形タイルで埋める構成です。border-radiusを大きめに取り、各タイルに余白を持たせると弁当箱らしいリズムが生まれます。

どんな場面で使う？

SaaS・アプリ・コーポレートサイトの機能紹介セクションやファーストビューなど、複数の要素にメリハリをつけて魅力的に見せたい場面に最適です。Apple風・モダンなデザインのサイトで近年定番になっています。

自分でカスタマイズしたい方へ

列数・行数・Gap・セルの範囲を自由に変更したい場合は、CSS Grid Generatorでドラッグ操作によりオリジナルのグリッドを作成できます。詳しい使い方は使い方ガイドをご覧ください。

ジェネレーターで自分のグリッドを作る →