Gefällt, das sieht gut aus.
Du könntest noch zwei Verbesserungen vornehmen:
Bei der Klasse grid können die beiden rows-Anweisungen gelöscht werden. Die bewirken nichts.
Bei der Klasse socialmedia wäre eigentlich grid-column: 3 / 4; korrekt. Wenn ein Container nur eine Spalte füllen soll reicht auch immer die erste Zahl, also grid-column: 3;
Ich habe mal ein Online-Beispiel erzeugt um zu zeigen, wie wenige Anweisungen für CSS-Grid erforderlich sind, um das drei- /zwei-Spalten-Layout zu erzeugen. Außer den Grid-Anweisungen habe ich nur CSS-Anweisungen benutzt um die Container optisch anzuzeigen.
https://www.w3schools.com/
Nach dem Starten mittels des grünen Run-Buttons kann die Fensterbreite durch Verschieben des Mittelstegs geändert werden. Die grid-column: auto; Anweisungen sind in diesem Fall überflüssig, da die Seite nach den Mobile-First-Konzept erstellt ist und das die Standardvorgaben bei CSS-Grid sind.
Die grid erzeugenden Anweisungen in den beiden Containern grid-zwei-spalten und grid-drei-spalten sind identisch und könnten auch noch zusammengefasst werden. Dann bleiben nur die folgenden CSS-Anweisungen für das Grid-Layout übrig:
/*.grid-zwei-spalten,
.grid-drei-spalten*/
@media all {
.grid-zwei-spalten,
.grid-drei-spalten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.5rem;
}
}
/*.grid-zwei-spalten*/
@media only screen and (min-width: 821px) {
.grid-zwei-spalten>:nth-child(1) {
grid-column: 1 / 3;
}
.grid-zwei-spalten>:nth-child(2) {
grid-column: 3;
}
}
Alles anzeigen
Alles andere ist überflüssig. 5 CSS-Angaben mit 3 Größenangaben.
Da im Grid-CSS keine HTML-Elementnamen verwendet werden können die beliebig geändert werden, nur die einfache Struktur muss passen.
rows-Anweisungen sind nicht notwendig, wie es bei CSS-Grid häufig der Fall ist.
