Zum Inhalt springen

grid-auto-flow

  • Redaktion 
  • Zuletzt aktualisiert am

#grid-auto-flow

Bestimmt die Position der automatisch erzeugten grid items.

default grid-auto-flow: row;

In diesem zweispaltigen Aufbau ist das zweite Gitterelement zweispaltig, das dritte Element ist vierzeilig hoch.

Die anderen Gitterelemente sind auf zusätzlichen Reihen platziert.

grid-auto-flow: column;

Die anderen Gitterelemente werden in zusätzlichen Spalten platziert.

grid-auto-flow: dense;

Der dichte Algorithmus versucht, alle anderen Gitterelemente so zu platzieren, dass alle „Löcher“ im Gitter gefüllt werden.

The grid-auto-flow property in CSS is used to control the automatic flow of items in a grid container. It specifies how the grid items are placed in the grid when they are not explicitly positioned using the grid-row and grid-column properties. The grid-auto-flow property can be set to one of two values: row or column. When set to row, grid items are placed in rows, starting at the top and moving left to right. When set to column, grid items are placed in columns, starting at the left and moving top to bottom. This property is useful for creating grid layouts that automatically adjust to the size of their content.

  1. Es ist Teil des Moduls CSS Grid Layout, das ein zweidimensionales, rasterbasiertes Layoutsystem für Elemente auf einer Webseite bietet. Dieses Layoutsystem ermöglicht es Webmastern, komplexe und flexible Layouts mit relativer Leichtigkeit zu erstellen, was es zu einem leistungsstarken Werkzeug für die Gestaltung responsiver Websites macht.
  2. Neben der Eigenschaft grid-auto-flow enthält das CSS-Grid-Layoutmodul auch andere Eigenschaften zur Steuerung von Größe, Position und Aussehen von Gitterelementen, wie grid-template-columns, grid-template-rows und grid-gap.
  3. Die Eigenschaft grid-auto-flow kann in Kombination mit anderen CSS-Grid-Eigenschaften verwendet werden, um eine Vielzahl von Grid-Layouts zu erstellen. Wenn Sie zum Beispiel die Eigenschaft grid-auto-flow auf column setzen, können Webmaster Rasterlayouts erstellen, die sich automatisch an die Höhe des Inhalts anpassen, anstatt an die Breite.
  4. Bei der Verwendung der Eigenschaft grid-auto-flow ist zu beachten, dass sie nur für Gitterelemente gilt, die nicht explizit über die Eigenschaften grid-row und grid-column positioniert sind. Alle Gitterelemente, die explizit positioniert sind, werden von der Eigenschaft grid-auto-flow nicht beeinflusst.
  5. Die Eigenschaft grid-auto-flow wird von den meisten modernen Webbrowsern unterstützt, darunter Google Chrome, Mozilla Firefox und Microsoft Edge. Wie bei jeder neuen Webtechnologie ist es jedoch immer eine gute Idee, die Browserkompatibilität zu prüfen, bevor Sie sie in der Produktion verwenden.
Redaktion
Letzte Artikel von Redaktion (Alle anzeigen)

Weitere Beiträge: