Grid einteilen mir fr oder viewport-width (vw)

[Rolf B]

Hallo grabs86,

das sind verschiedene Maße für verschiedene Anwendungsszenarien. Beim Spezifizieren von Grid-Spalten würde ich annehmen, dass Du mit fr fast immer besser bedient bist, weil der Browser Dir dann viel Rechnerei abnimmt.

Ein Seitenlayout ist normalerweise so gestrickt, dass Du für deine Inhalte eine Maximalbreite (max-width) vorsiehst, um kein Wikipedia-Layout zu bekommen (Zeilen mit 1920px Breite sind einfach nicht mehr lesbar). Man setzt normalerweise eine max-width von 60em oder 80em - je nach Seitenaufteilung. Eine einzelne Textbox mit mehr als 60em Breite ist schon eine Zumutung.

D.h. auf schmaleren Viewports musst Du die 100% Breite sinnvoll auf Spalten verteilen, aber sobald max-width die Breite limitiert, ändert sich die Formel, weil dann links und/oder rechts vom Inhalt Leerraum entsteht. Wenn Du dann mit vw rechnest, bist Du am Ende.

body {
   margin: 8px;
   max-width: 80em;
   height: calc(100vh - 16px);
   display: grid;
   grid-template-columns: 10em 1fr 1fr;
   grid-template-rows: auto auto 1fr auto;
}

Das wäre ein Beispiel für ein seitenfüllendes Layout mit einer 10em Spalte links für die Navigation und 2 gleich breiten Spalten für Inhalte. Oben sind 2 Auto-Bereiche (z.B. für den Header und eine Newsflash-Zeile), dann 1fr für den Hauptteil und ein auto-Bereich für den Impressums-Footer. Damit es nicht zu einfach wird, bekommt der body seine 8px Margin zum Bildschirmrand.

(Das ist natürlich nur die Desktop-Version für @media (min-width: 60em) oder so, auf schmaleren Viewports muss es anders aussehen).

Aber mach das mal mit vw Angaben… Vor allem wenn auto-Bereiche hinzukommen; dein Header ist vermutlich nicht immer gleich hoch, je nach verfügbaren Fonts, oder er bricht vielleicht bei bestimmten Bildbreiten um und bei anderen nicht. 1fr füllt einfach "den Rest" auf. Eine explizite Rechnerei mit vh geht kaputt.

Und wenn dein Grid nicht die ganze Seite füllt, sondern nur eine Box irgendwo auf der Seite (die vielleicht selbst wieder von einem Grid platziert wird), bist Du mit vw endgültig am Ende.

vw ist interessant, wenn Du ein Popup "halb so breit wie den Bildschirm" machen willst. Oder wenn Du mit font-size: clamp(0.8rem, 1.3vw, 2rem); die Schriftgröße mit der Bildschirmbreite skalieren willst (was seine eigenen Dämonen mitbringt…).

Rolf