Grid-Layout mit verschiedenen CSS Aspekten

[Rolf B]

Hallo Dajana,

eigentlich musst Du dem body nur margin: 10px auto; geben. Zusammen mit der max-width wird dann ab genügend breiten Bildschirm zentriert.

Ein paar Anregungen noch:

• Angesichts deines grid-gap von 20px (was vermutlich als 1em besser aussähe, wenn jemand zoomt) brauchst Du eigentlich den Margin nicht, den das Browser-Stylesheet den p Elementen in contact, lang und header gibt. Verwende dort einfach ein div, bzw. lass das Element ganz weg. Eigentlich ist es nicht nötig. Eigenschaften wie text-align:right kannst Du auch auf das lang-Element setzen.
• Ein contact-Element gibt es in HTML nicht. Vielleicht gibt's das mal irgendwann, und dann kollidierst Du damit. Custom-Elemente müssen ein Minuszeichen enthalten, um das zu vermeiden (also z.B. x-contact). Du könntest aber auch ein <div class="contact"> verwenden.
• Das gleiche gilt für das lang-Element. Die &nbsp; im lang möchten eigentlich auch lieber ein padding-right des lang-Elements sein.
• Ein header möchte eine Überschrift enthalten (h1 Element). Dein Bild kannst Du dort hineinsetzen. Das text-align:center kannst Du auf das h1 Element legen. Dem h1 solltest Du auch noch margin:0 geben, sonst entsteht zu viel "Luft".
• Dein Voice&Mind Bild braucht auf jeden Fall einen alt-Text, z.B. alt="voice and mind".
• Klassen wie "right" und "center" sind - sorry - falsch. Man benennt Klassen nach dem Inhalt der Elemente, die sie darstellen, nicht nach Präsentationswünschen. Wenn Du möchtest, dass das p Element im lang Element rechtsbündigen Inhalt hat, dann schreibst Du das so ins CSS: `lang p { text-align:right; }. Wenn Du 17 Bereiche hast, deren Text rechtsbündig sein muss, dann überlege Dir, ob sie eine gemeinsame Fachlichkeit haben, und ob sie auf allen Bildschirmen rechtsbündig dazustellen nicht. Nichts ist blöder als ein Element mit class="right", dass auf dem Smartphone zu zentrieren ist.
• Dein article, der das Bild enthält, ist eigentlich ein aside 😀

Jetzt zum Grid:

Die fällt vielleicht auf, dass zwischen Bild und Text zu viel Platz ist. Das liegt daran, dass dein Grid zweispaltig ist und deshalb die Kontaktinformationen die Breite dominieren. Das geht eleganter, wenn man mehr Spalten benutzt:

body {
   grid-template: "contact contact lang"   35px
                  "header  header  header" auto
                  "bild    main    main"   1fr /
                   auto    auto    auto;
}

Deine Höhenangaben habe ich erstmal übernommen, um Dir zu zeigen, wie man grid-template-areas und grid-template-rows zusammenfassen kann. In dem Fall muss (meine ich) auch noch der Inhalt von grid-template-columns hinzu (hinter dem /), darum die drei Autos am Ende. Aber eigentlich kannst Du auf Höhen- und Breitenangaben verzichten, weil deine Seite durch die Dreispaltigkeit wunderbar ins Browserfenster "flutscht". Also einfach grid-template-areas, wie zuvor (nur 3-spaltig), ohne Angaben für template-rows und template-columns. Lass den Browser mal machen und füge nur eigene Breiten/Höhen ein, wenn es gar nicht anders geht.

Durch die Dreispaltigkeit und auto-Breite erübrigt sich auch die Rechtsbündigkeit von lang. Es wird nämlich dadurch nur genau so breit wie nötig, und kommt dadurch autmatisch an den rechten Rand.

Wenn Du ohnehin mit benannten Bereichen arbeitest, kannst Du die auch verwenden, statt Gridzeilen und -spalten abzuzählen:

contact {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
/* geht mit Areas so: */
contact {
    grid-area: contact;
}

Und jetzt noch was grundsätzliches: Man tut sich im responsiven Design leichter, wenn man dem mobile first Ansatz folgt. D.h.: die Media-Queries fügen Breite hinzu.

Ich habe mal ein wenig gebastelt: https://jsfiddle.net/Rolf_b/48eLwdvc/. Das ist mobile-first, und ich bleibe im grid-Layout. Aber: die Template-Areas verändern sich. Contact und Lang bleiben nebeneinander, und der Rest kommt untereinander. Der Header ist position:absolute (zu einem position:relative im body), damit er auf dem Bild liegt. Ansonsten ist das Bild auf dem Smartphone nur halb auf dem Bildschirm, wenn man die Seite startet, und dafür ist es zu schön.

Sobald genug Platz ist, wird das Grid dreispaltig, die Margins werden größer.

Und ich habe eine Weile gefummelt, damit das Bild bei schmalen Viewports, die aber noch zu breit für die "unter 30em" Ansicht sind, nicht zu dominant ist. Das ist dieses max-width:40vw (=40% der Fensterbreite) für aside img.

Guck Dir davon ab, was Dir gefällt. Das srcset musste ich weglassen weil da komischerweise die https-Sperre in Chrome greift.

Rolf