CSS - grid-auto-flow

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

概要

属性名 grid-auto-flow
[ row | column ] || dense
初期値row
適用可能要素グリッドコンテナ
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

グリッドアイテムを並べる方向を row または column で指定します。dense を指定すると、空きスペースをなるべく埋めるように配置します。

使用例

CSS
.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;
}
HTML
<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>
表示
grid-auto-flow: row
A
B
C
D
grid-auto-flow: column
A
B
C
D

dense を指定すると、グリッドアイテムの大きさの都合により生じた空きスペースに、後続のコンテンツが可能な限り埋め込まれるようになります。

CSS
grid-auto-flow: row dense;
表示
grid-auto-flow: row
A
B
C
D
E
grid-auto-flow: row dense
A
B
C
D
E

関連項目

リンク


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