| 属性名 | grid-auto-flow |
|---|---|
| 値 | [ row | column ] || dense |
| 初期値 | row |
| 適用可能要素 | グリッドコンテナ |
| 継承 | 継承しない |
| CSS | IE | Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|---|
| CSS3 | × | 16 | 52 | 57 | 44 | 10.1 |
グリッドアイテムを並べる方向を row または column で指定します。dense を指定すると、空きスペースをなるべく埋めるように配置します。
.grid-container-row {
display: grid;
grid-auto-flow: row;
grid-template-rows: 2rem 2rem;
grid-template-columns: 4rem 4rem;
}
.grid-container-column {
display: grid;
grid-auto-flow: column;
grid-template-rows: 2rem 2rem;
grid-template-columns: 4rem 4rem;
}
.grid-item {
border: 1px solid #ccc;
background-color: #fff;
text-align: center;
}
<b>grid-auto-flow: row</b> <div class="grid-container-row"> <div class="grid-item">A</div> <div class="grid-item">B</div> <div class="grid-item">C</div> <div class="grid-item">D</div> </div> <b>grid-auto-flow: column</b> <div class="grid-container-column"> <div class="grid-item">A</div> <div class="grid-item">B</div> <div class="grid-item">C</div> <div class="grid-item">D</div> </div>
dense を指定すると、グリッドアイテムの大きさの都合により生じた空きスペースに、後続のコンテンツが可能な限り埋め込まれるようになります。
grid-auto-flow: row dense;