CSS Grid Basics

Um eine Website zu gestalten, haben Web-Entwickler früher Tabellen, Positioning oder Inline-Block verwendet. Das funktioniert zwar, ist aber keine saubere Lösung. Diese Methoden machen es schwerer, die Seite auch für andere Bildschirmgrößen anzupassen und man kann die Ausrichtung des Inhalts nur schwer so darstellen, wie man es möchte.

Positioning:
Mit "Positioning" kann man die Position einzelner Elemente auf einer Webseite verändern.

Inline-Block:

Block-Elmente mit diesem Attribut werden in einer Zeile dargestellt wie es der Name "inline" schon sagt.

CSS Grid bietet dir eine tolle Lösung und hilft dir, den Inhalt deiner Seite so auszurichten und zu gestalten, wie du es möchtest.

Grid erstellen

Um CSS Grid benutzen zu können, brauchen wir erst einmal ein Parent-Element. Diese sind Elemente, welche noch weitere Elemente in sich verschachtelt haben. Dem Parent-Element muss man das Attribut "display: grid" geben. Nur so zählt dieses Element als Grid-Container. Die benötigte Anzahl an Zeilen und Spalten können mit den Attributen "grid-template-rows" und "grid-template-columns" festgelegt werden. Beiden Attributen können mehrere Werte gegeben werden, die mit einem Leerzeichen getrennt werden müssen. Jeder Wert zählt als eine Spalte oder Zeile und hat die entsprechende Größe.

.parent{
    display: grid;
	grid-template-rows: 20px 20px 20px;
	grid-template-columns: 20px 20px 20px 20px 20px;
}

Child-Elemente sind die im Parent-Element verschachtelten Elemente. Um sie platzieren zu können, muss jedem ein Start- und Endwert zugewiesen werden. Dies kann durch die Attribute "grid-column-start", "grid-row-start", "grid-column-end" und "grid-row-end" festgelegt werden. "grid-column-start" und "grid-column-end" legen fest in welcher Spalte das Element beginnt und endet, während "grid-row-start" und "grid-row-end" festlegen in welcher Zeile das Element beginnt und endet.

.item-1{
	grid-column-start: 1;
	grid-column-end: 3;

	grid-row-start: 1;
	grid-row-end: 3;
}

.item-2{
	grid-column-start: 3;
	grid-column-end: 5;

	grid-row-start: 1;
	grid-row-end: 2;
}

.item-3{
	grid-column-start: 3;
	grid-column-end: 5;

	grid-row-start: 2;
	grid-row-end: 3;
}

.item-4{
	grid-column-start: 5;
	grid-column-end: 6;

	grid-row-start: 1;
	grid-row-end: 3;
}

.item-5{
	grid-column-start: 1;
	grid-column-end: 6;

	grid-row-start: 3;
	grid-row-end: 4;
}

Um es sich einfacher zu machen und das Layout des Grids besser zu visualisieren, kann man das Attribut "grid-template-area" verwenden. Diesem Attribut kann man mehrere Strings in der Form eines Grids geben. Die Anzahl der Strings gibt die Menge an Zeilen an und jedes Wort, welches sich im String befindet und von einem Leerzeichen getrennt ist, zählt als Spalte. Möchte man nun das ein Element an einer speziellen Stelle im Grid sitzt, muss man dem Child-Element nur diesen Namen zuweisen mithilfe des Attributes "grid-area".

.parent{
	grid-template-area: "header header header side side"
						"middle middle middle side side"
						"bottom bottom bottom end .";

}

.item-1{
	gride-area: header;
}

.item-2{
	grid-area: middle;
}

.item-3{
	gride-area: side;
}

.item-4{
	grid-area: bottom;
}

.item-5{
	grid-area: end;
}

Wenn man möchte, kann man den Abstand zwischen den Elementen mithilfe von "column-gap" (vergrößert den Abstand zwischen den Spalten) oder "row-gap" (vergrößert den Abstand zwischen den Zeilen) vergrößern.

.parent{
    column-gap: 10px;
    row-gap: 10px;
}

Wenn man eine große Anzahl an Elementen hat, kann es nervig sein allen Elementen deren Position zu geben, aus diesem Grund gibt es das Attribut "grid-auto-flow", welches man dem Parent-Element geben kann. Dann muss man nur noch die Position des ersten und letzten Elements definieren und der Algorithmus macht den Rest.

.parent{
	grid-auto-flow: row;
}

.item-1{
	grid-area: 1 / 1 / 3 / 2;
  //grid-area: row-start / column-start / row-end / column-end
}

.item-5{
	grid-area: 1 / 5 / 3 / 6;
}

.parent{
	grid-auto-flow: column;
}

.item-1{
	grid-area: 1 / 1 / 3 / 2;
}

.item-5{
	grid-area: 1 / 5 / 3 / 6;
}

Wenn "grid-auto-flow: column" verwendet wird, werden die Elemente nacheinander in die Spalten eingefügt. Sobald eine Spalte voll ist, wird die nächste gefüllt.

"grid-auto-flow: row" macht das Gleiche aber füllt die Zeilen nacheinander.
Falls Elemente nicht mehr ins Grid passen oder außerhalb des Grids platziert werden, erstellt CSS Grid automatisch leere Felder. Mit "grid-auto-columns" und "grid-auto-rows" kann man diesen Feldern eine Größe geben.

.parent{
	grid-auto-columns: 20px;
	grid-auto-rows: 20px;
}

Inhalt ausrichten

CSS Grid macht das Ausrichten deines Inhalts viel einfacher. Mit Attributen wie "justify-items" und "align-items" können alle Elemente im Grid vertikal und horizontal so ausgerichtet werden wie man möchte. Elemente können auch gestreckt werden, damit sie das ganze Feld einnehmen.

.parent{
	justify-items: start;
}

.parent{
	justify-items: center;
}

.parent{
	justify-items: end;
}

.parent{
	align-items: start;
}

.parent{
	align-items: center;
}

.parent{
	align-items: end;
}

Wenn einzelne Elemente eine andere Ausrichtung haben sollen, kann man ihnen das Attribut "align-self" und "justify-self" geben.

.item-1{
	justify-self: start;
}

.item-2{
	justify-self: center;
}

.item-3{
	justify-self: stretch;
}

.item-4{
	justify-self: end;
}

.item-1{
	align-self: start;
}

.item-2{
	align-self: center;
}

.item-3{
	align-self: stretch;
}

.item-4{
	align-self: end;
}

Mit den Attributen "justify-content" und "align-content" kann auch die Position des gesamten Grids verändert werden.

.parent{
	justify-content: start;
}

.parent{
	justify-content: center;
}

.parent{
	justify-content: end;
}

.parent{
	justify-content: stretch;
}

.parent{
	justify-content: space-between;
}

.parent{
	align-content: start;
}

.parent{
	align-content: center;
}

.parent{
	align-content: end;
}

.parent{
	align-content: stretch;
}

.parent{
	align-content: space-between;
}

Weiterer Content

Falls du noch mehr über CSS Grid erfahren willst. Ich habe einen weiteren Beitrag geschrieben, der auf die Responsivität von CSS Grid eingeht.

Responsive CSS Grid - Blog

CSS Grid macht es nicht nur einfacher deine Webseite zu gestalten und den Inhalt auszurichten, sondern du kannst das gesamte Grid mit einer Zeile Code responsiv machen.

https://nrml.de/blog/responsive-css-grid

CSS Grid Basics

Grid erstellen

Inhalt ausrichten

Weiterer Content

Responsive CSS Grid - Blog

Bad Sobernheim

Kontakt

Bad Sobernheim