| 属性名 | grid |
|---|---|
| 値 |
<grid-template> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> |
| 初期値 | なし |
| 適用可能要素 | グリッドコンテナ |
| 継承 | 継承しない |
| CSS | IE | Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|---|
| CSS3 | × | 16 | 52 | 57 | 44 | 10.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番目の間の領域にグリッドアイテムを描画することを意味します。
.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; }
<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>
auto-flow をつけると、後続するリストを無限回繰り返すのと同様の働きをします。
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 を参照してください。