#grid-auto-flow
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.
- 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.
- Neben der Eigenschaft
grid-auto-flowenthält das CSS-Grid-Layoutmodul auch andere Eigenschaften zur Steuerung von Größe, Position und Aussehen von Gitterelementen, wiegrid-template-columns,grid-template-rowsundgrid-gap. - Die Eigenschaft
grid-auto-flowkann in Kombination mit anderen CSS-Grid-Eigenschaften verwendet werden, um eine Vielzahl von Grid-Layouts zu erstellen. Wenn Sie zum Beispiel die Eigenschaftgrid-auto-flowaufcolumnsetzen, können Webmaster Rasterlayouts erstellen, die sich automatisch an die Höhe des Inhalts anpassen, anstatt an die Breite. - Bei der Verwendung der Eigenschaft
grid-auto-flowist zu beachten, dass sie nur für Gitterelemente gilt, die nicht explizit über die Eigenschaftengrid-rowundgrid-columnpositioniert sind. Alle Gitterelemente, die explizit positioniert sind, werden von der Eigenschaftgrid-auto-flownicht beeinflusst. - Die Eigenschaft
grid-auto-flowwird 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.
