CSS - grid

トップ > CSSリファレンス > grid

概要

属性名 grid
<grid-template> |
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? |
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
初期値なし
適用可能要素グリッドコンテナ
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

グリッド線に合わせてコンテンツを柔軟にレイアウトします。カラムの番号ではなく、グリッド線の番号を用いて指定することに注意してください。まだドラフト段階の仕様ですが、Internet Explorer を除くモダンブラウザでサポートされています。grid は、grid-template, grid-template-rows, grid-template-columns をまとめて指定します。

使用例

下記の例では、グリッドコンテナを縦方向に 3rem, 3rem、横方向に 4rem, 4rem, 4rem, 4rem の領域に分けています。grid-row: 1 / 2 は縦方向のグリッド線の 1番目から 2番目、grid-column: 1 / 2 は、横方向のグリッド線の 1番目から 2番目の間の領域にグリッドアイテムを描画することを意味します。

CSS
.grid-container {
  display: grid;
  grid: 3rem 3rem / 4rem 4rem 4rem 4rem;
}
.grid-container > * {
  border: 1px solid #ccc;
  text-align: center;
}
.itemA { grid-row: 1 / 2; grid-column: 1 / 2; }
.itemB { grid-row: 2 / 3; grid-column: 1 / 2; }
.itemC { grid-row: 1 / 3; grid-column: 2 / 3; }
.itemD { grid-row: 1 / 2; grid-column: 3 / 5; }
.itemE { grid-row: 2 / 3; grid-column: 3 / 4; }
.itemF { grid-row: 2 / 3; grid-column: 4 / 5; }
HTML
<div class="grid-container">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>
表示
A
B
C
D
E
F

詳細説明

auto-flow をつけると、後続するリストを無限回繰り返すのと同様の働きをします。

CSS
grid: auto-flow 2rem / 4rem 4rem 4rem;
grid: 2rem 2rem 2rem 2rem... / 4rem 4rem 4rem; と同等

grid: auto-flow 1rem 2rem 3rem / 4rem 4rem 4rem;
grid: 1rem 2rem 3rem 1rem 2rem 3rem... / 4rem 4rem 4rem; と同等

dense の説明は grid-auto-flow を参照してください。

関連項目

リンク


Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
http://www.tohoho-web.com/css/prop/grid.htm