.grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 15px;
}

.grid-child {
	grid-row: 1 / 5;
	grid-column: 2 / 3;
	
	/* das gleiche wie */
	grid-area: 1 / 2 / 5 / 3;
}


// zwei spalten
grid-template-columns: 4fr 1fr; 

// drei zeilen, die erste ist maximal 120px hoch
grid-template-rows: minmax(0, 120px) 3fr 1fr;

Auto responsive Grid

• Ich will ein 3-Spalten Layout
• Ich muss die Container Weite wissen. In diesem Beispiel ist die 1440px breit.
• Ich nehme die gewünschte Anzahl an Spalten, addiere diese plus 1 und teile die Summe durch die Conainer Weite. Also 3+1 = 4 und 1440px / 4 = 360.
• Ich füge diese 360px in der minmax Kalkulation ein.
• Du kannst die Werte nach belieben anpassen

.grid-container {
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

Was passiert nun?
Das Grid-Item muss nun minimum 360px breit sein. Wenn es auf dem Bildschirm keinen Platz mehr dafür hat, dann bricht es das Layout automatisch um und das Grid-Item fügt sich eine Zeile weiter unten ein. Voilà, nun ist es automatisch responsive.

Du kannst die einzelnen Grid-Items natürlich immer noch individuell anwählen und je nach Breakpoint andere Darstellungen hinzufügen.