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

[Rolf B]

Hallo einsiedler,

nein.

Die Spaltendefinition gibt's nur einmal, nicht nach jeder Zeile. Wenn Du zusätzliche vertikale Linien definierst, dann gehen die durch's ganze Grid, von oben bis unten.

Für main-navigation und to-top-button kannst du eigene Line-Namen verwenden, musst Du aber eigentlich nicht. Der To-Top Button ist ja in der gleichen Spalte wie die main-navigation.

Warum Du drei Spalten hast und nicht nur 2, wird vermutlich deinem restlichen Kram geschuldet sein.

Ich habe mal etwas gebastelt, was vielleicht deinen Ideen entspricht und mit Line-Namen sparsamer ist:

https://jsfiddle.net/sf3u94jh/

body {
  display: grid;
  grid: "main-head   main-head   main-head" auto
        "article-box article-box article-box" 1fr
        "main-footer main-footer main-footer" auto
      / 1fr 1fr [main-nav-start] auto [main-nav-end];
}
nav {
  grid-area: main-head / main-nav;
}
nav details {
  position: relative;
}
nav details > ul {
  position: absolute;
  right:0;
  width: max-content;
  margin: 0;
  padding: 0 1em;
  list-style: none;
}
#to-top-button {
  grid-area: article-box / main-nav;
  place-self: end center;
  margin-bottom: 2em;
}

grid-area: main-head / main-nav sorgt dafür, dass sich dieses Element in y-Richtung an main-head orientiert und in x-Richtung an main-nav. Das erspart Dir das Festlegen von zusätzlichen horizontalen Linien. Ich finde deine Grid-Definition wegen dieser Extralinien sehr unübersichtlich.

place-self ist eine Sammeleigenschaft für align-self und justify-self (in dieser Reihenfolge), damit kann ein Element festgelegen, wo es in seiner Zelle platziert werden will. Das überschreibt für dieses Element die justify-items und align-items Eigenschaften des Grids. end center ist unten in der Mitte. Und der margin-bottom schiebt es wieder 2em nach oben.

Es kann natürlich sein, dass das für Dich nicht funktioniert, wenn Du das Grid beim Umschalten an @media-Breakpoints umdefinierst. Das muss man dann schauen. Schlimmstenfalls musst Du es doch so machen, wie Du angefangen hast; das sähe dann so aus:

body {
  grid: [main-nav-start] "main-head   main-head   main-head" auto [main-nav-end]
        [to-top-start]   "article-box article-box article-box" 1fr [to-top-end]
                         "main-footer main-footer main-footer" auto
                         /    1fr        1fr 
                      [main-nav-start to-top-start] auto [main-nav-end to-top-end];
}
#navigations { grid-area: main-nav; }
#to-top-button { grid-area: to-top; }

Der Zeilenumbruch in der Spaltendefinition ist nicht erforderlich, verbessert aber die Lesbarkeit, meine ich.

Die Navigation ist zuerst nur so breit wie das Summary-Element. Wenn Du sie aufklappst, wird sie breiter und auch höher. Das stört, deshalb sollte das Aufklappmenü absolut positioniert werden. Die für dich passenden Ränder und Paddings musst Du natürlich selbst rausfinden.

Rolf