Ganz einfaches CSS Grid Layout

[Matthias Scharwies]

Servus!

[…] Ich möchte mich da gerne ganz langsam Schritt für Schritt herantasten, damit ich möglichst alles von Beginn an richtig verstehe.

Was fehlt:

• Eine H1 Überschrift 😉
• Ein Konzept, für den Seiteninhalt. Wie sollen die Elemente auf der Seite angeordnet werden. Einfach von oben nach unten? Dafür braucht's kein Grid. Das ist Default. Bei nur 4 Abstraktboxen ist mehr aber auch kaum feststellbar.

Die Struktur hatte ich doch schon erwähnt:

• Kopf
• Navigation
• Inhalt
• Fuß

Die 4 Elemente sollen tatsächlich einfach von ohne nach unten angeordnet werden.

Passt also alles- bis auf die fehlende(n) Überschrift(en). Die kommen wohl noch mit dem Text.

Ich hatte gedacht, dass das auch schon als Grid (mit nur einer Spalte) bezeichnet wird. Aber wenn das nicht nötig ist, umso besser.

Ein Raster ist ja zweidimensional. Bis jetzt werden die Inhalte nach den Default-Stylesheets der Browser (die sich nach der Spec richten) über die gesamte Breite verteilt, brechen bei weiterem Inhalt in die nächste Zeile um und stellen ohne weitere Angaben alles problemlos dar.

HTML ohne CSS ist bereits responsiv!

Die max-width: 62rem ist gut, abschreckendes Beispiel ist die Wikipedia.

Mit dem CSS-Grid Layout kannst Du jetzt Elemente nebeneinander anordnen, aber auch hier gilt: LESS is MORE

Könnte dennoch auch ein Grid sinnvoll sein aus folgendem Grund: […] Mit so einem Grid, kann ich doch die Reihenfolge im Quelltext unabhängig von der dann im Browser dargestellten Reihenfolge wählen.

Die Suchmaschinen analysieren alles und filtern Navigation und Kopf heraus. Deshalb ist so eine Veränderung der Reihenfolge mit order möglich, aber nicht zu empfehlen. Für „normale“ Nutzer würde sich bei größeren Navigationen ein Skip-Link anbieten.

Herzliche Grüße

Matthias Scharwies