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.