grid-gap und justify-content/align-content
Geschrieben am:
Wie verhalten sich eigentlich die Abstände zwischen den Rasterzellen - grid-gap -, wenn zusätzlich die Ausrichtung beispielsweise mit justify-content und align-content festgelegt wird?
Diese Frage kam bei meinem Grid-Workshop auf den "HTML & CSS Days in München" auf.
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.
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:
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.