Lücken? Gasp!

Zuerst gab es Flexboxen (die Kinder eines display: flex Containers). Wenn man sie visuell trennen wollte, musste man Inhaltsbegründung (d.h. justify-content: space-between), margin-Tricksereien oder manchmal beides verwenden. Dann kamen Grids (ein display: grid Container), und Grids konnten dank grid-gap nicht mit Margins behaftete, nicht trickreiche Mindestabstände zwischen den Grid-Zellen haben. Flexboxen hatten keine Abstände.

Jetzt können sie es, dank der wachsenden Unterstützung für gap, dem Nachfolger von grid-gap, der nicht auf Grids beschränkt ist. Mit gap können Sie Ihre Grids, Ihre Flexboxen und sogar Ihre Mehrspaltensätze mit Abständen versehen. Es ist lückenhaft!

Abstand mit Grid

Beginnen wir dort, wo gap am robustesten ist: CSS Grid. Hier ist ein grundlegendes Grid-Setup in HTML und CSS

<section>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
</section>

section {
  display: grid;
  grid-template-rows: repeat(2,auto);
  grid-template-columns: repeat(4,auto);
  gap: 1em;
}
section div {
  width: 2em;
}

Das platziert die Grid-Zellen mindestens 1em voneinander entfernt. Der Trennungsabstand kann größer sein, abhängig von anderen Bedingungen, die außerhalb des Rahmens dieses Beitrags liegen, aber mindestens sollten sie durch 1em getrennt sein. (OK, machen wir ein Beispiel: gap-Abstände kommen zu allen Margins auf den Grid-Zellen hinzu, also wenn alle Grid-Elemente margin: 2px; haben, wäre der visuelle Abstand zwischen den Grid-Zellen mindestens 1em plus 4px.) Standardmäßig verursachen Änderungen der Abstandsgröße eine Größenänderung der Grid-Elemente, sodass sie ihre Zellen ausfüllen.

Dies alles funktioniert, weil gap eigentlich ein Kurzschreibweise für die Eigenschaften row-gap und column-gap ist. gap: 1em wird als gap: 1em 1em interpretiert, was eine Kurzschreibweise für row-gap: 1em; column-gap: 1em; ist. Wenn Sie unterschiedliche Zeilen- und Spaltenabstände wünschen, dann ist etwas wie gap: 0.5em 1em gut geeignet.

Abstand mit Flexbox

Das Gleiche in einem Flexbox-Kontext zu tun, ergibt Abstände, aber nicht ganz auf die gleiche Weise, wie sie in Grids vorkommen. Gehen Sie vom selben HTML wie oben aus, aber mit diesem CSS stattdessen

section {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

Die Flexboxen werden durch mindestens den Wert von gap hier auseinandergedrückt und (dank flex-wrap) umbrechen auf neue Flex-Zeilen, wenn ihnen der Platz in ihrem Flex-Container ausgeht. Eine Änderung des Abstands kann zu einer Änderung des Umbruchs der Flex-Elemente führen, aber im Gegensatz zu Grid ändern Abstände zwischen Flex-Elementen nicht die Größen der Flex-Elemente. Abstandsänderungen können dazu führen, dass der Flex-Umbruch an verschiedenen Stellen stattfindet, was bedeutet, dass sich die Anzahl der Flex-Elemente pro Zeile ändert, aber die Breiten gleich bleiben (es sei denn, Sie haben sie über flex zum Wachsen oder Schrumpfen gebracht).

Abstand mit Mehrspaltigkeit

Im Fall von Mehrspaltigkeit gibt es eine kleine Einschränkung für gap: Es werden nur Spaltenabstände verwendet. Sie können Zeilenabstände für Mehrspaltigkeit deklarieren, wenn Sie möchten, aber sie werden ignoriert.

section {
  columns: 2;
  gap: 1em;
}

Unterstützung

Unterstützung für gap, row-gap und column-gap ist überraschend weit verbreitet. Mozilla hat sie seit Version 61, Chromium seit Version 66, und dank der Arbeit von Igalia's Sergio Villar kommen sie bald auch für Safari und Mobile Safari (sie sind bereits in den Technology Preview Builds). Wenn Ihr Grid-, Flex- oder Mehrspaltigkeitsinhalt also etwas mehr Platz zum Atmen benötigt, machen Sie sich bereit, in die Lücke zu fallen!