grid-gap und justify-content/align-content

Bei meinem Grid-Workshop auf den HTML & CSS Days in München kam die Frage auf, wie sich die Abstände zwischen den Rasterzellen – grid-gap – verhalten, wenn zusätzlich die Ausrichtung beispielsweise mit justify-content und align-content festgelegt wird. Hier sind die Details.

Vorweg die Zusammenfassung: grid-gap definierte die Minimalabstände zwischen den Rasterelementen, die Abstände können größer werden, wenn es Platz gibt, der über justify-content/align-content verteilt wird.

Im folgenden Beispiel verwende ich feste Pixelwerte für alles, damit es gut messbar ist – im echten  Einsatz sind andere Einheiten flexibler.

Folgende Rasterdefinition mit festen Breiten und Höhen und einem Rand um das Raster, damit man genau erkennt, wie weit es reicht:

section {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
width: 450px;
height: 300px;
border: 3px solid #f60;
grid-gap: 20px;
}

Ohne weitere Ausrichtung sieht es aus, wie man erwartet: die Elemente verteilen sich auf die Rasterzellen und es gibt exakt die 20px Abstand dazwischen. Es gibt keinen Abstand zum Rand des Rasters, das ist bei grid-gap so.

grid-gap bei CSS-Grids: Abstand zwischen den Elementen, aber nicht am Rand

Wenn man jetzt die Ausrichtung definiert:

section:nth-child(2) {
justify-content: space-evenly;
align-content: space-evenly;
}

Dann wird der übrig bleibende Platz gleichmäßig zwischen die Rasterlemente und am Anfang und am Ende platziert.

Das sieht dann folgendermaßen aus:

grid-gap mit justify-content/align-items: zusätzlicher Platz am Anfang, Ende und in der Mitte

Es fällt auf, dass der Abstand zwischen den Rasterzellen in der Mitte etwas größer ist als der Abstand von Rasterzellen zum Rand. Das liegt daran, dass zwischen den Rasterzellen ja ebenfalls das grid-gap wirkt. Und dazu kommt dann noch der Platz, der zu verteilen ist.

Eine grobe Rechnung:

  • Das Raster ist 450px breit.
  • Die zwei Rasterzellen sind jeweils 100px breit – macht 200px.
  • Es gibt einen Abstand zwischen den Rasterzellen von 20px.

Damit bleiben 450px – 220px zu verteilen, exkt: 230px. Diese werden gleichmäßig am Anfang in der Mitte und am Ende des Rasters verteilt. Damit ergibt sich am Anfang ein Abstand von 76,666 Pixel, genauso am Ende. In der Mitte kommt hingegen zu den 76,666 Pixel noch 20px (grid-gap) hinzu, das macht 96,666 Pixel.
Bisschen schade finde ich, dass man im Gridinspektor im Firefox keinen Unterschied zwischen dem Leerraum, der über grid-gap kommt, und dem Leeraum, der durch justify-content/align-content hinzugefügt wird, zu erkennen ist.

Das Beispiel zu  grid-gap in  Kombination mit justify-content und align-content bei Codepen.

 

 

Kommentare sind geschlossen.