Problem mit css-grid

[einsiedler]

Vielen Dank! Prima!
So weit, so hübsch! ;o))
So siehts aus: Grid-Demo-Seite
Im Opera 49.0 // Chrome 63.0.3239.84 // Firefox 57.0.4 sieht`s PRIMA aus,
so wie es soll!
Nur der IE (Edge) ist wieder Bescheiden.... *grummel×
Habe gelesen:
*There is no auto-placement behaviour in IE10 implementation. This means that you need to position everything rather than use the autoplacement ability of grid.

If you don’t position items they will stack up in the first cell of the grid.×
Gut, habe ich verstanden…
Den "cards" habe ich folgendes hinzugefügt:

`#card4 {grid-row-end: span 2; -ms-grid-column: 1; -ms-grid-row: 2;}

#card5 {grid-column-end: span 2; -ms-grid-column: 2; -ms-grid-row: 2;}`

Jede "card" muss also einzeln positioniert werden.
Doch wie mache ich das jetzt nun mit den card`s 1 - 3 & 6 - 11 ???
Ich glaube, auch wenn es umständlicher ist, das ich jede einzelne "card" einzeln
/ individuell behandeln möchte, ist für später besser wenn Bilder und Texte
in diese "Cards" kommen. Auch wenn alles dadurch "länger" wird!
Dann ist mir aufgefallen das "grid-column-gap, grid-row-gap and grid-gap" im IE
noch nicht funktioniert.
Habe ich es richtig verstanden das man dann das grid-template-columns:
um ein Paar Felder erweitern muss, also auf insgesamt 6 in der Breite?
Etwa so: grid-template-columns: 1rem 1fr 1rem 1fr 1rem 1fr 1rem;
Und dann die Cards "positioniert" zwischen diesen "1rem Lücken"?

Lieben Gruß der einsiedelnde