Grid (グリッド)

CSS グリッド は display プロパティの値に grid を指定して定義します。グリッドの列や行は grid-template-rows や grid-template-columns プロパティで定義します。

これらのプロパティを使って定義したグリッドのことを 明示的グリッド (explicit grid) と呼びます。

明示的グリッドの外にコンテンツを配置する場合や、自動配置に任せる場合、グリッドアイテムが収まるように行や列のグリッドトラックがグリッドアルゴリズムに従って暗黙的に追加されます。暗黙的グリッド (implicit grid) は、定義済みのトラックの外部にコンテンツを配置するため自動的に作成されるグリッドです。

次の例では 3 列 2 行の明示的グリッドを作成しています。グリッドで 3 つ目の行は、明示的グリッドが定義している 6 つ以上のアイテムが含まれていることで作られた、暗黙的グリッドによる行トラックです。

例

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

html

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

例

関連情報