Problem mit css-grid

[einsiedler]

DANKE Dir! :o)
Aber 2 Punkte:
A) Im IE klebt der footer knapp unter dem header.
Ich habe versucht durch das einfügen von "display: -ms-flexbox;"
und: footer { -ms-flex-order: 3; }
dies zu beheben, aber vergeblich. Ich denke mal da muss irgendwo ein "altmodisches clear"
hin. Da kenne ich mich aber nicht mehr mit aus.
B) Ich denke mal: section::after { content: attr(id); }
das sind die übrigen "cards" 1 - 3 & 6 - 11
was aber nun wenn ich die cards individueller gestalten möchte:
Die erste "card" in der "höhe" sehr schmal und horizontal über alle 3 cards hinweg
bis zum ende.
(Dort kommt eine Sub-Überschrift hin!)
Alle weiteren cards je nach Inhalt eine unterschiedliche Höhe!
Oder aber kann man:
section::after { content: attr(id); }
durch:

#card1 { grid-row-end: span 2;

		/* fallback */
		min-height: 2rem;
	}  

#card2 { grid-row-end: span 2;

		/* fallback */
		min-height: 20rem;
	}  

#card3 { grid-row-end: span 2;

		/* fallback */
		min-height: 20rem;
	}  

(...)

#card11 { grid-row-end: span 2;

		/* fallback */
		min-height: 20rem;
	}  

ersetzen???

Gute N8 der einsiedelnde