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 October 2017.

Die grid-auto-flow CSS Eigenschaft steuert, wie der automatische Platzierungsalgorithmus funktioniert und legt fest, wie automatisch platzierte Elemente im Raster angeordnet 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. Einzelheiten finden Sie unter csswg-drafts #10231.

Syntax

css

/* 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 der beiden Formen annehmen:

ein einzelnes Schlüsselwort: entweder row, column oder dense.
zwei Schlüsselwörter: row dense oder column dense.

Werte

row

Elemente werden platziert, indem jede Zeile der Reihe nach gefüllt wird, und bei Bedarf neue Zeilen hinzugefügt werden. Wenn weder row noch column angegeben ist, wird row angenommen.

column

Elemente werden platziert, indem jede Spalte der Reihe nach gefüllt wird, und bei Bedarf neue Spalten hinzugefügt werden.

dense

Der "dichte" Platzierungsalgorithmus versucht, früher im Raster entstandene Lücken zu füllen, wenn später kleinere Elemente auftauchen. Dies kann dazu führen, dass Elemente außerhalb der Reihenfolge erscheinen, wenn dies Lücken füllen würde, 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 nur "vorwärts" im Raster geht und niemals zurückverfolgt, um Lücken zu füllen. Dies stellt sicher, dass alle automatisch platzierten Elemente "in der Reihenfolge" erscheinen, auch wenn dadurch Lücken entstehen, 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

Formaler Syntax

grid-auto-flow = 
  [ row | column ]  ||
  dense

Beispiele

Einstellen der automatischen Rasterplatzierung

HTML

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

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