`grid-auto-flow` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.

Die grid-auto-flow CSS-Eigenschaft steuert, wie der Auto-Platzierungs-Algorithmus funktioniert, indem sie festlegt, 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. Details 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 von zwei Formen annehmen:

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

Werte

row

Elemente werden nacheinander in jede Zeile eingefügt, wobei bei Bedarf neue Zeilen hinzugefügt werden. Wenn weder row noch column angegeben wird, wird row angenommen.

column

Elemente werden nacheinander in jede Spalte eingefügt, wobei bei Bedarf neue Spalten hinzugefügt werden.

dense

Der "dichte" Packalgorithmus versucht, frühere Lücken im Raster zu füllen, falls später kleinere Elemente hinzukommen. Dadurch können Elemente außer der Reihe erscheinen, wenn dies Lücken füllt, die von größeren Elementen hinterlassen wurden.

Wenn dies ausgelassen wird, wird ein "spärlicher" Algorithmus verwendet, bei dem der Platzierungsalgorithmus beim Platzieren von Elementen nur "vorwärts" im Raster geht und nie zurückgeht, um Lücken zu füllen. Dies stellt sicher, dass alle automatisch platzierten Elemente "in Reihenfolge" erscheinen, selbst wenn Lücken bleiben, die von späteren Elementen hätten gefüllt werden können.

Formelle Definition

Anfangswert	`row`
Anwendbar auf	Gridcontainer
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Einstellung 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

Spezifikation
CSS Grid Layout Module Level 2 # grid-auto-flow-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

grid-auto-flow CSS property

HTML

CSS

Ergebnis

Help improve MDN

`grid-auto-flow` CSS property