grid-auto-flowプロパティ
grid-auto-flowプロパティは、
グリッド内のアイテムの自動配置を指定します。
値にはrow（行をアイテムで埋める）、column（列を埋める）、
dense（グリッド内のすべての空きスペースにアイテムを配置する）、
row dense（各行とグリッド内のすべての空きスペースを埋めるようにアイテムを配置する）、
column dense（各列とグリッド内のすべての空きスペースをアイテムで埋める）があります。
構文
セレクタ {
grid-auto-flow: グリッドの埋める部分;
}
例
すべての行をテーブルで埋めてみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: row;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
では、テーブルのすべての列を要素で埋めてみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
すべての要素をテーブルに配置し、空きスペースが残らないようにしましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
では、行内のすべての空きスペースを要素で埋めてみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: row dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
前の例を変更して、要素が列内のすべての空きスペースを埋めるようにしましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: column dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
関連項目
-
gridプロパティ、
列と行のプロパティの短縮形を指定します -
grid-auto-rowsプロパティ、
暗黙的なグリッド内の行の数と幅を指定します -
grid-template-columnsプロパティ、
グリッド内の列の数と幅を指定します -
grid-template-rowsプロパティ、
グリッド内の行の数と幅を指定します
