CSS grid-gap

Die Eigenschaften <grid-gap>, <row-gap> und <column-gap> dienen zur Steuerung des Abstands in Rasterlayouts. Damit lassen sich Elemente leicht trennen, ohne zusätzliche Margins zu verwenden.

Einheitliche Abstände mit grid-gap

Die Eigenschaft <grid-gap> ist eine Kurzform, die gleichzeitig den Abstand zwischen Zeilen und Spalten festlegt. Dies ist eine einfache Möglichkeit, ein Raster geordnet und lesbar zu machen.

Im folgenden Beispiel erstellen wir ein Raster mit zwei Spalten, wobei der Abstand zwischen den Zellen 20px beträgt.

Unterschiedliche Abstände für Zeilen und Spalten

Mit <row-gap> und <column-gap> lassen sich die Abstände zwischen Zeilen und Spalten getrennt einstellen. Dies ist nützlich, wenn man unterschiedliche Layouts erreichen möchte.

In diesem Beispiel beträgt der Abstand zwischen den Zeilen 10px, während der Abstand zwischen den Spalten 30px beträgt.

Tipps zur Verwendung von grid-gap

Das Einstellen von Abständen verbessert die visuelle Struktur und Benutzerfreundlichkeit einer Website. Hier einige hilfreiche Tipps:

• Verwende <grid-gap> anstelle von Margins, wenn du ein einheitliches Rasterlayout benötigst.
• In der mobilen Ansicht empfiehlt es sich, kleinere gap-Werte zu verwenden, um sich besser an den Bildschirm anzupassen.
• Kombiniere <row-gap> und <column-gap>, wenn du unterschiedliche Abstände für Zeilen und Spalten benötigst.