Einführung in CSS Grids
CSS Grids sind eine Möglichkeit, Elemente gleichzeitig horizontal und vertikal anzuordnen. Dies ist eine fortschrittlichere Methode im Vergleich zu Flexbox, aber komplexer zu erlernen.
Um ein Grid zu erstellen, muss man
die Eigenschaft display
auf den Wert grid setzen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Danach verwandelt sich das Element in ein zweidimensionales Raster, in dem Elemente vertikal (Spalten) und horizontal (Zeilen) angeordnet werden. Der Bereich am Schnittpunkt einer Spalte und einer Zeile wird Zelle genannt.
Mit speziellen Eigenschaften kann man Elemente sowohl nach Zeilen als auch nach Spalten platzieren. Dies ermöglicht einfach die Erstellung von solchen Dingen:
In den folgenden Lektionen werden wir zuerst die Platzierung von Elementen in Spalten lernen, dann zu der Anordnung in Zeilen übergehen, und danach alles zusammenführen.
