Übung 13: Kopf, Leiste und Inhalt mit Grid anordnen

Hinweise

Lösung

.seite { display: grid; grid-template-columns: 120px 1fr; }
header { grid-column: 1 / -1; }

Was 1fr bedeutet

Die Einheit steht für einen Anteil am übrigen Platz – also an dem, was nach allen festen Spuren und allen Zwischenräumen bleibt. Eine Spalte mit 120 Pixeln und eine mit einem Anteil ergeben zusammen die volle Breite, ohne dass jemand rechnen müsste. Zwei Spuren mit den Anteilen eins und zwei teilen den Rest im Verhältnis eins zu zwei.

Das ist der wesentliche Unterschied zu einer Prozentangabe: Prozent misst am Ganzen und rechnet Zwischenräume nicht heraus, weshalb eine Reihe aus Prozentbreiten plus Abstand zuverlässig überläuft. Der Anteil kennt dieses Problem nicht.

Eine Feinheit hat der Anteil doch: Er hat eine Untergrenze, nämlich die Mindestgröße des Inhalts. Eine Spur mit einem Anteil wird also nicht schmaler als das breiteste unumbrechbare Element darin – bei einer langen Adresse oder einer breiten Tabelle sprengt sie das Raster. Wer das nicht will, notiert die Spur als Bereich von null bis zum Anteil.

Wie ein Kind über mehrere Spalten geht

Die Angabe für die Spalte eines Kindes nimmt Linien entgegen, nicht Spalten. Bei zwei Spalten gibt es drei Linien: eine ganz links, eine dazwischen, eine ganz rechts. Ein Element von Linie eins bis Linie drei überspannt damit beide Spalten.

Weil die Zahl der Spalten sich ändern kann, gibt es die Kurzform mit der negativen Zählung: Minus eins bezeichnet immer die letzte Linie, gleichgültig wie viele Spuren das Raster hat. Ein Kopf von eins bis minus eins geht also über die volle Breite und bleibt richtig, wenn später eine dritte Spalte dazukommt.

Der zweite Weg führt über benannte Bereiche: Am Container wird das Raster als Zeichnung aus Namen notiert, und jedes Kind bekommt seinen Namen zugewiesen. Das liest sich in einer Anordnung wie dieser deutlich besser als Liniennummern, weil die Zeichnung im Stylesheet aussieht wie das Ergebnis. Der Prüfer akzeptiert beide Wege.

Was auf schmalen Bildschirmen daraus wird

Eine Anordnung aus fester Leiste und flexiblem Inhalt funktioniert, solange beides nebeneinander Platz hat. Darunter soll die Leiste in der Regel über oder unter den Inhalt rutschen. Weil das Raster am Container definiert ist, genügt dafür eine einzige Änderung an einer Stelle – eine einzige Spalte statt zweier, und alles ordnet sich neu.

Das ist der eigentliche Gewinn gegenüber älteren Techniken: Die Kinder wissen nichts von der Anordnung, also müssen sie auch nichts zurücknehmen. Bei einem Layout aus umflossenen Elementen musste jedes Kind seine Breite und seinen Float einzeln verlieren.

Zu beachten bleibt die Reihenfolge im Quelltext. Sie bestimmt, was vorgelesen wird und in welcher Folge die Tabulatortaste springt – das Raster ordnet nur optisch. Steht die Leiste im Quelltext hinter dem Inhalt, weil sie auf schmalen Bildschirmen unten stehen soll, dann liest die Sprachausgabe sie auch auf breiten Bildschirmen zuletzt. Deshalb schreibt man den Quelltext in der Reihenfolge, in der er gelesen werden soll, und baut das Raster darum herum.

Benannte Bereiche

Der zweite Weg zur selben Anordnung notiert das Raster als Zeichnung: Am Container steht für jede Zeile eine Zeichenkette mit den Namen der Bereiche, und jedes Kind bekommt seinen Namen zugewiesen. Ein Name, der in zwei benachbarten Zellen steht, lässt den Bereich sich über beide erstrecken; ein Punkt bezeichnet eine bewusst leere Zelle.

Der Vorteil ist die Lesbarkeit: Das Stylesheet sieht aus wie das Ergebnis, und eine Änderung an der Anordnung ist eine Änderung an der Zeichnung, nicht an mehreren Kindern. Für die schmale Ansicht wird die Zeichnung einfach neu geschrieben – dieselben Namen, andere Verteilung –, und kein Kind muss angefasst werden.

Zwei Regeln gehören dazu. Alle Zeilen der Zeichnung müssen gleich viele Namen haben, sonst ist die Angabe ungültig und das ganze Raster fällt aus. Und ein Bereich muss rechteckig sein; eine L-Form lässt sich nicht benennen. Wer beides beachtet, bekommt die wartbarste Form, die CSS für Anordnungen kennt – ausführlich in Grid.

Der Prüfer misst die Breiten und die Lage der drei Bereiche. Damit sind Liniennummern und benannte Bereiche gleichwertig, und ebenso eine Lösung, die die Spuren anders notiert, solange die Leiste 120 Pixel breit ist und der Inhalt den Rest bekommt. Wer die Zeichnung mit Namen wählt, hat es beim Umbau auf eine Spalte leichter – gefordert ist das hier nicht.

Fragen zur Übung