ブロークングリッドとは | バイブコーダーのための名称辞典

ブロークングリッドとは

グリッドの区画から要素をあえてはみ出させ、重ねて配置する崩したレイアウト。

概要

整然としたグリッドの区画に収まらないよう、画像やテキストのブロックをあえてはみ出させたり重ねたりして配置するレイアウトです。整いすぎた印象を崩して手作り感や個性を出したいデザイン系のサイト、ポートフォリオサイトなどで使われます。負のマージン（margin-top にマイナスの値を指定する等）や z-index で重なり順を調整して実現します。

別名

表記ゆれ：ブロークングリッド、崩しレイアウト、ずらしレイアウト、broken grid

「崩しレイアウト」「ずらしレイアウト」は見た目をそのまま表した日本語の呼び方です。

AI への伝え方

「グリッドをあえて崩して、画像とテキストを重ねて配置して」のように伝えます。どのブロックを手前に出すか（z-index の重なり順）と、どれくらいずらすか（重なりの深さ）を具体的に伝えると仕上がりがぶれません。文字が画像の上に重なる場合はコントラストが不足して読みにくくならないよう、背景を半透明の板で敷くなどの配慮も伝えておくと安全です。

似たパーツとの違い

すべてのマスをきれいにそろえて並べる「カードグリッド」とは対照的に、ブロークングリッドは意図的にそろえない点が最大の違いです。整った印象を求める一覧ページにはカードグリッドが向き、個性や動きを出したい導入部分やポートフォリオにはブロークングリッドが向きます。

デモ

見出しがここに入ります

画像とテキストのブロックをあえてグリッドからずらし、重ねて配置しています。

コード

HTML

<div class="broken-grid-demo">
  <div class="broken-grid-demo__image" aria-hidden="true"></div>
  <div class="broken-grid-demo__text">
    <h2 class="broken-grid-demo__heading">見出しがここに入ります</h2>
    <p class="broken-grid-demo__body">
      画像とテキストのブロックをあえてグリッドからずらし、重ねて配置しています。
    </p>
  </div>
</div>

CSS

.broken-grid-demo {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  font-family: sans-serif;
}

.broken-grid-demo__image {
  grid-column: 1 / 7;
  height: 180px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0017c1, #333333);
}

.broken-grid-demo__text {
  position: relative;
  grid-column: 4 / 9;
  z-index: 1;
  margin-top: -60px;
  padding: 20px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.broken-grid-demo__heading {
  margin: 0 0 8px;
  font-size: 16px;
  color: #212121;
}

.broken-grid-demo__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}