Gap ist der Abstand zwischen den Teilen eines Rasters oder einer Flex-Reihe, gesetzt am Container statt an jedem Kind.
- Gap (Layout-Abstand)
Eigenschaft am Container, die den Abstand zwischen seinen Teilen festlegt.
Beispiel: „Ein Gap entsteht nur zwischen den Teilen, nicht am äußeren Rand.“
Der Vorteil gegenüber margin
Ein Außenabstand an jedem Kind erzeugt auch außen Platz, den man anschließend beim ersten und letzten Element wieder wegnehmen muss. Der Gap entsteht nur dazwischen. Bei umbrechenden Reihen gilt er außerdem auch zwischen den Zeilen.
.raster {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}Wo er wirkt
In Rastern und Flex-Containern, außerdem in mehrspaltigem Text. In einem gewöhnlichen Block ohne Layoutverfahren hat er keine Wirkung; dort bleibt der Außenabstand das Mittel.