Grid-Layout
Ein Grid-Layout
ist ein mächtiges CSS-Werkzeug zur Anordnung von Containern in
einem HTML-Dokument. Semantische Strukturelemente von HTML erhalten mit Hife von
CSS erst ihr Design und ihren Platz in der Darstellung des HTML-Dokuments. Hierfür ist das
Grid-Layout ein vielseitiges und flexibles Werkzeug. Die Trennung von Inhalt (HTML) und Design (CSS)
wird dadurch besonders effektiv möglich.
Definieren eines Grids
Ein Grid ist ein Raster, das man flexibel definieren kann, mit dem man einen HTML-Bereich (z.B. den <body>
-Bereich) strukturieren kann. Das Raster besteht aus Zeilen (rows
) und Spalten (columns
)
Die display
-Eigenschaft eines HTML-Bereichs wird dazu auf den Wert grid
gesetzt. Dann folgen die Definitionen der Zeilen und Spalten des
Grids.
display: grid; grid-template-rows: 105px 1fr 75px; grid-template-columns: 1fr 3fr 1fr;
Die Größendefinitionen können pixelgenau mit der Angabe px
gemacht
werden. Oder auch relativ mit der Angabe fr
. Der Browser berechnet dann
selbst die Größe der einzelnen Bereiche.
Beispiel: zentriertes, dreispaltiges, dreizeiliges Grid-Layout des <body>
-Bereichs:
body { font-family: Verdana, Arial, sans-serif; font-size: 14px; width: 76%; margin-left: auto; margin-right: auto; background-color: beige; display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 105px 1fr 75px; }
Das Eltern-Element eines Grid-Layouts wird als Grid-Container
bezeichnet.
Alle direkten Kind-Elemente des Grid-Containers werden zu Grid-Items
.
Die Definitionen im Grid-Container geben vor, wie die Grid-Items angeordnet werden sollen.
Zuordnung der Grid-Items
Die Grid-Items (direkten Kind-Elemente) eines Bereichs mit Grid-Layout können flexibel den Zeilen und Spalten zugeordnet werden. Dabei ist es egal, in welcher Reihenfolge die einzelnen Bereiche im HTML-Dokument definiert wurden.
Mit der Eigenschaft span
kann ein Element sich auch über einen Bereich
von mehreren Spalten erstrecken.
Beispiel: Positionierung der Kindelemente des <body>
-Bereichs:
main { grid-column: 1 / span 2; grid-row: 2; background-color: white; padding: 1em; border-style: solid; border-radius: 15px; border-width: 0px; } aside { grid-column: 3; grid-row: 2; width: 220px; padding: 1em; }
Eigenschaften der Grid-Items
grid-auto-flow
Mit der grid-auto-flow
Eigenschaft können die Grid-Items automatisch
positioniert werden.
grid-auto-flow: column; |
Die Grid Elemente werden automatisch in Spalten angeordnet. |
grid-auto-flow: row; |
Die Grid Elemente werden automatisch in Zeilen angeordnet. |