Rinnen, auchGassen genannt, sind Abstände zwischen den Inhalts-Tracks. Diese können imCSS-Grid-Layout,Flex-Layout undMehrspalten-Layout mit den Eigenschaftencolumn-gap,row-gap, odergap erstellt werden.

Beispiel

Im folgenden Beispiel haben wir ein Gitter mit drei Spalten und zwei Zeilen, mit20px Zwischenräumen sowohl zwischen den Spaltentracks als auch den Zeilentracks.

* {  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>  <div>One</div>  <div>Two</div>  <div>Three</div>  <div>Four</div>  <div>Five</div></div>

Bezüglich der Rastergrößen wirken Lücken wie ein regulärer Raster-Track, jedoch kann nichts in die Lücke platziert werden. Die Lücke wirkt, als ob die Rasterlinie an diesem Ort an Größe gewonnen hätte, so dass jedes Rasterelement, das nach dieser Linie platziert wird, am Ende der Lücke beginnt.

Die Eigenschaftenrow-gap undcolumn-gap sind nicht die einzigen Dinge, die dazu führen können, dass Tracks sich auseinanderziehen. Ränder, Abstände oder die Verwendung von Raumausrichteeigenschaften in derCSS-Box-Ausrichtung können alle zur sichtbaren Lücke beitragen – daher sollten die Eigenschaftenrow-gap undcolumn-gap nicht als gleichbedeutend mit der "Rinnengröße" angesehen werden, es sei denn, Sie wissen, dass Ihr Design keinen zusätzlichen Raum mit einer dieser Methoden eingeführt hat.

Siehe auch

• CSS-Grid-Layout

• Eigenschaftsreferenz

  • column-gap
  • row-gap
  • gap

• Definition von Rinnen in der CSS-Grid-Layout-Spezifikation