Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
grid-auto-flow
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Oktober 2017.
Die grid-auto-flow CSS Eigenschaft steuert, wie der Auto-Platzierungsalgorithmus funktioniert und gibt genau an, wie automatisch platzierte Elemente in das Raster eingefügt werden.
Probieren Sie es aus
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: row dense;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 220px;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
#example-element > div:nth-child(1) {
grid-column: auto / span 2;
}
#example-element > div:nth-child(2) {
grid-column: auto / span 2;
}
Hinweis:
Die Eigenschaft masonry-auto-flow wurde aus dem CSS Masonry-Layout zugunsten von grid-auto-flow entfernt.
Siehe csswg-drafts #10231 für Details.
Syntax
/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;
Diese Eigenschaft kann eine von zwei Formen annehmen:
- ein einzelnes Schlüsselwort: eines von
row,column, oderdense. - zwei Schlüsselwörter:
row denseodercolumn dense.
Werte
row-
Elemente werden platziert, indem jede Zeile der Reihe nach gefüllt wird, wobei bei Bedarf neue Zeilen hinzugefügt werden. Wird weder
rownochcolumnangegeben, wirdrowangenommen. column-
Elemente werden platziert, indem jede Spalte der Reihe nach gefüllt wird, wobei bei Bedarf neue Spalten hinzugefügt werden.
dense-
Der "dichte" Packalgorithmus versucht, Lücken früher im Raster zu füllen, falls später kleinere Elemente auftauchen. Dies kann dazu führen, dass Elemente außer der Reihenfolge erscheinen, wenn dies Lücken füllt, die von größeren Elementen hinterlassen wurden.
Wenn es weggelassen wird, wird ein "spärlicher" Algorithmus verwendet, bei dem der Platzierungsalgorithmus beim Platzieren von Elementen immer nur "vorwärts" im Raster vorgeht und niemals zurückgeht, um Lücken zu füllen. Dies stellt sicher, dass alle automatisch platzierten Elemente "in der Reihenfolge" erscheinen, selbst wenn dies Lücken hinterlässt, die von späteren Elementen hätten gefüllt werden können.
Formale Definition
| Anfangswert | row |
|---|---|
| Anwendbar auf | Gridcontainer |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
grid-auto-flow =
[ row | column ] ||
dense
Beispiele
Automatische Rasterplatzierung festlegen
HTML
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
</div>
<select id="direction">
<option value="column">column</option>
<option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>
CSS
#grid {
height: 200px;
width: 200px;
display: grid;
gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */
}
#item1 {
background-color: lime;
grid-row-start: 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
grid-column-start: 2;
background-color: red;
}
#item5 {
background-color: aqua;
}
function changeGridAutoFlow() {
const grid = document.getElementById("grid");
const direction = document.getElementById("direction");
const dense = document.getElementById("dense");
let gridAutoFlow = direction.value === "row" ? "row" : "column";
if (dense.checked) {
gridAutoFlow += " dense";
}
grid.style.gridAutoFlow = gridAutoFlow;
}
const selectElem = document.querySelector("select");
const inputElem = document.querySelector("input");
selectElem.addEventListener("change", changeGridAutoFlow);
inputElem.addEventListener("change", changeGridAutoFlow);
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |
Browser-Kompatibilität
Loading...