Implizites Grid & auto-flow

In beiden Grids wurden weder Spalten noch Reihen definiert. Die Anzahl ergibt sich aus den Positionierungen oder Erstreckungsräumen der einzelnen Elemente. Außerdem ist die Anzahl der Reihen und Spalten davon abhängig, welchen Wert auto-flow bekommt.

.grid {
    display: inline-grid;
}
.row {
    grid-auto-flow: row;
}
.column {
    grid-auto-flow: column;
}
   

Hier werden Erstreckungsräume und Positionen angegeben, die je nach Richtung gar nicht möglich sind.

Das erste und das fünfte Element,erstreckt sich jeweils von Reihe 1 bis 3 oder von Line 1 bis Line 4. Wenn es keine 3 Reihen gibt erstrecken sie sich bis zur letzten Reihe.

item5 wird auf Spalte 5 positioniert oder man könnte auch sagen die Startlinie ist 5. Wenn weniger als 5 Spalten vorhanden sind, wird es in der letzten Spalte positioniert.

        .item1 {
            grid-column-start: 1 ;
            grid-row: 1 / 4;
        }

        .item5 {
            grid-column-start: 5 ;
            grid-row: 1 / 4;
        }

    

grid-auto-flow: row;

Hier definiert .item5 die Anzahl der Spalten. .item1 und .item5 erstrecken sich über soviele Reihen wie möglich.

1

2

3

4

5

6

7

8

grid-auto-flow: column;

Hier wird die Anzahl der Reihen durch grid-row: 1 / 4 definiert. .item5 liegt so weit rechts wie möglich.

1

2

3

4

5

6

7

8