Ganz einfaches CSS Grid Layout
bearbeitet von
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-Stylesheet](https://wiki.selfhtml.org/wiki/Default-Stylesheet)s 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.
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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Skip-Links) anbieten.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
Ganz einfaches CSS Grid Layout
bearbeitet von
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-Stylesheet](https://wiki.selfhtml.org/wiki/Default-Stylesheet)s 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.
Die `max-width: 62rem` ist gut, abschreckendes Beispiel ist die Wikipedia.
Mit dem CSS-Grid Layout kannst Du jetzt Elemente nebeneinander anordnen, aber quch 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Skip-Links) anbieten.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“