De eigenschap grid-auto-flow
De eigenschap grid-auto-flow bepaalt
de automatische plaatsing van elementen in een grid.
Kan de waarden row hebben - vult de
rijen met elementen, column - kolommen,
dense - plaatst elementen op alle lege plekken
in het grid; row dense - rangschikt elementen door
elke rij en alle vrije ruimte in het grid te vullen; column dense -
vult elk kolom en alle vrije ruimte in het grid met elementen.
Syntaxis
selector {
grid-auto-flow: te vullen deel van het grid;
}
Voorbeeld
Laten we in de tabel alle rijen vullen:
<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;
}
:
Voorbeeld
En laten we nu alle kolommen in de tabel vullen met elementen:
<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;
}
:
Voorbeeld
Laten we alle elementen in de tabel plaatsen, zodat er geen vrije ruimte overblijft:
<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;
}
:
Voorbeeld
En laten we nu alle vrije ruimte in de rijen vullen met elementen:
<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;
}
:
Voorbeeld
Laten we het vorige voorbeeld aanpassen, zodat de elementen alle vrije ruimte in de kolommen vullen:
<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;
}
:
Zie ook
-
de eigenschap
grid,
die een verkorte notatie voor de eigenschappen van kolommen en rijen bepaalt -
de eigenschap
grid-auto-rows,
die het aantal en de breedte van rijen in een impliciet grid bepaalt -
de eigenschap
grid-template-columns,
die het aantal en de breedte van kolommen in een grid bepaalt -
de eigenschap
grid-template-rows,
die het aantal en de breedte van rijen in een grid bepaalt
