Deine Frage hatte ich anders verstanden.
Der Container B wurde in dem Beispiel positioniert. Wenn ein Container über mehrere Zellen positioniert wird gibt es innerhalb des Containers keine Lücke. Dafür sorgt CSS-Grid automatisch.
Weiterhin werden die Zellen zunächst mit den positionierten Containern gefüllt, die nicht positionierten Container füllen dann die danach noch freigebliebenen Zellen auf.
Vorgehen dafür:
1. Durch "display: grid;" einen Container zu einem Grid-Container machen
2. Die Anzahl der Zeilen und Spalten und damit der Zellen bestimmen
3. Den Abstand zwischen den Zellen bestimmen
Alles drei geschieht in dem Beispiel durch die Angaben:
.raster {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 20px;
}
Danach wird der Container B positioniert. Dafür gibt es in CSS-Grid mehrere Möglichkeiten. In dem Beispiel wurden dafür die Gridlinien verwendet.
Mit Erstellung des Rasters werden automatisch die Gridlininen erstellt. Die erste Linie beginnt links (bzw. oberhalb) der Zellen. Die letzte endet rechts (bzw. unterhalb) der Zellen. Es gibt also immer in jede Richtung eine Linie mehr als Zellen. Die erste ist immer die linke (bzw. oberste).
Die Linien werden vom CSS automatisch von links nach rechts bzw. von oben nach unten durchnummeriert, beginnend mit 1.
In dem Beispiel wird der Container B zunächst durch "grid-column-start: 2;" in die zweite Spalte gerückt. Ohne End-Angabe ist der Container genau eine Spalte breit. Also auch wenn es noch mehr Spalten geben würde, würde der Container B nur eine Spalte breit werden, wenn keine end-Angabe gemacht wird.
Durch "grid-row-start: 1;" beginnt Container B in der der ersten (obersten) Zeile. Durch "grid-row-end: 3;" endet Container B in der zweiten Zeile, erstreckt sich also ohne Lücke über zwei Zeilen.
Insgesamt also, wenn der Container B die Klasse B (class="b") hat:
.b {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}
Dabei darf man halt die Zählweise der Linien nicht aus den Augen verlieren, die kann bei größeren Rastern leicht unübersichtlich werden.
