Abstände zwischen den Zellen

Die Karten berühren sich. Wir könnten jeder Karte einen Außenabstand (margin) geben, aber es gibt einen besseren Weg, den du von Flexbox kennst: die Eigenschaft gap. Sie legt den Abstand zwischen den Zeilen und den Spalten des Grids fest.

.karten {
	gap: 1rem;
}

Die Abstände gibt es nur zwischen den Zellen, nie an den Rändern des Grids, deshalb bleiben die äußeren Karten bündig mit dem Rest der Seite. Der Browser zieht die Abstände zuerst von der Breite ab, und die fr-Spalten teilen sich, was übrig bleibt.

Bei zwei Werten ist der erste der Abstand zwischen den Zeilen und der zweite der Abstand zwischen den Spalten: gap: 2rem 1rem. Jeder lässt sich auch einzeln mit den Eigenschaften row-gap und column-gap festlegen.