Abstände

Im untenstehenden Beispiel haben wir ein Raster mit drei Spalten- und zwei Zeilen-Tracks mit 20px Lücken zwischen den Spalten- und Zeilen-Tracks.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #fff8f8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  column-gap: 20px;
  row-gap: 20px;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

In Bezug auf die Rastergröße wirken Lücken so, als ob sie ein regulärer Grid-Track wären, jedoch kann nichts in die Lücke platziert werden. Die Lücke wirkt, als ob die Gitterlinie an dieser Stelle zusätzliche Größe erhalten hat, sodass jedes Rasterelement, das nach dieser Linie platziert wird, am Ende der Lücke beginnt.

Die Eigenschaften row-gap und column-gap sind nicht die einzigen Dinge, die zu einer Vergrößerung der Stäcke führen können. Ränder, Auffüllungen oder die Verwendung der Raumverteilungseigenschaften in der CSS-Box-Ausrichtung können ebenfalls zum sichtbaren Abstand beitragen – daher sollten die Eigenschaften row-gap und column-gap nicht als gleichbedeutend mit der "Größe der Gasse" angesehen werden, es sei denn, Sie wissen, dass Ihr Design keinen zusätzlichen Raum mit einer dieser Methoden eingeführt hat.

• CSS Grid Layout

• Eigenschaftenreferenz

  • column-gap
  • row-gap
  • gap

• Definition von Abständen in der CSS Grid Layout Spezifikation