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

[Rolf B]

Hallo einsiedler,

ich habe noch was gelernt: Wenn ich in grid-area auf benannte Linien Bezug nehme, dann wird dieser Name kontextabhängig interpretiert.

Zunächst einmal wird aber die Kurzform grid-area: a auf die volle Form expandiert. Dazu gibt es Regeln. Die Spezfikation sagt dazu:

• fehlt der zweite Wert und ist der erste Wert ein Name, verwende den ersten Wert auch für den zweiten Wert -> grid-area: a / a;
• fehlt der dritte Wert und ist der erste Wert ein Name, verwende den ersten Wert auch für den dritten Wert -> grid-area: a / a / a;
• fehlt der vierte Wert und ist der zweite Wert ein Name, verwende den zweiten Wert auch für den vierten Wert -> grid-area: a / a / a / a;

Dies sind vier Namen, für Startzeile, Startspalte, Endzeile und Endspalte. Laut Spezifikation sind das aber nicht die Liniennamen, sondern CSS fügt für Startzeile und Startspalte automatisch ein -start an und für Endzeile und Endspalte automatisch ein -end.

ES SEI DENN – und das steht nicht in der Spec, wird von meinem Browser aber gemacht –, DER NAME EXISTIERT ALS LINIENNAME.

Wenn ich dein Grid herbeinehme und etwas modifiziere, dann könnte man den Bereich für .content-box auch so definieren:

body {
  grid: "head  content  menu" 1fr 
        "head  content  menu" auto    /* <--- Äh. Hä? */
       /  1fr auto auto;
}

body > .content-box {
   /* vertikal von content-start bis content-end */
   grid-row: content;
   /* horizontal content-start bis menu-end */
   grid-column: content / menu;
   /* oder alles in einem, verwirrt mich aber jedes Mal: */
   grid-area: content / content / content / menu;
}

Wobei da jetzt noch was faul ist - zwei Grid-Zeilen mit identischen Namen ergeben keinen Sinn. Das kann dann genauso gut nur eine Zeile sein.

Rolf