Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[Matthias Scharwies]

Servus!

1a) Grundsätzliches zum Grid - Raster:

Ist es erforderlich das angefangen vom obersten html über body, main bis zum verschachtelsten, untersten div, komplett alles mit display: grid; "durchgerastert" wird?

Nein, ein Raster wird nur für ein Element und seine direkten Kind-Elemente, aber nicht für die Kindes-Kind-Elemente angelegt.

Oder kann ich einmal beispielsweise dem main ein grid mitgeben und weiterhin einer untergeordneten section ebenso ein display: grid; wie ich es einfach benötige?

Ist dies legitim?

Ja genau!

body {
  display:grid;
  grid-template-columns: repeat(3,fr);
}

footer {
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(3,fr);
}

Siehe bitte meine Beispielsseite.

2a) Frage zu inline-size

Breiten von nav id="skip-to-section" / header class="subheader" / details class="related-links" --- mit inline-size korrekt festlegen!

Bisher habe ich immer das Problem damit, auch wenn ich % - Angaben verwende, dann passiert es, das das jeweilige grid Raster dem ganzen Raster nach ausserhalb überspringt / überlagert.

Das Grid überlässt dem Browser die Breitenberechnung. Ich würde da nicht reinpfuschen!

So gehört sich das aber nicht. Auch möchte ich diese Elemente zentrieren, das gelingt mir aus irgendeinem Grund auch nicht, auch nicht mit justify-items

CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items

An die lustigen Witzbolde unter euch mit irgendwelchen Spökskes, unterlasst es einfach hier etwas beizutragen.

Schade, Humor gehört doch dazu.

Herzliche Grüße

Matthias Scharwies