Grid einteilen mir fr oder viewport-width (vw)

[grabs86]

Hallo, ich fuchse mich gerade darin ein, eine Website mit css-grid (ohne fertiges Framework) zu erstellen.

Ich nutze also display: grid; Nun habe ich bei meinen ersten Versuchen die columns mit vw (viewport-width) und die rows mit vh eingeteilt. Immerwieder stoße ich aber daraun, dass in Fraktions (fr) eingeteilt wird.

Was ist eher gebräuchlich? Spricht etwas für die Einteilung in fr?

Dank vorab und Grüße,

Gabriel

[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

[Gunnar Bittersmann]

@@Rolf B

um kein Wikipedia-Layout zu bekommen (Zeilen mit 1920px Breite sind einfach nicht mehr lesbar).

„Wikipedia – Folterkammer mit 8 Metern Satzbreite“
— Frank Rausch auf der Typo Berlin 2018

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

Hallo, ich fuchse mich gerade darin ein, eine Website mit css-grid (ohne fertiges Framework) zu erstellen.

Herzlich willkommen bei SELFHTML!

Ich nutze also display: grid; Nun habe ich bei meinen ersten Versuchen die columns mit vw (viewport-width) und die rows mit vh eingeteilt. Immerwieder stoße ich aber daraun, dass in Fraktions (fr) eingeteilt wird.

Was ist eher gebräuchlich? Spricht etwas für die Einteilung in fr?

Wichtig ist, dass du Deine Spalten responsiv machst und nicht etwa alle Spalten mit festen Pixelwerten ausdrückst:

body {
  grid-template-columns: repeat(12, 100px);
}

Alle Spalten sind fest 100px breit, gibt es nur in Beispielen in manchen Tutorials.

Normalerweise hast du nur eine Spalte, deren Breite fest bleiben soll:

body {
  display: grid;
  grid-template-columns: 15em 1fr 1fr; 
  gap: 1em;
}

Die erste Spalte ist 15em breit (richtet sich also nach der Standardschriftgröße), die beiden anderen verteilen den noch verfügbaren Raum unter sich auf. Du musst nichts rechnen, das macht der Browser.

Schau mal hier:

• CSS/Tutorials/Grid

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@grabs86

Spricht etwas für die Einteilung in fr?

Ja: dass du dem Rechner das Rechnen überlassen kannst. (Pun intended.)

Angenommen, dein Grid geht über die volle Viewportbreite und du willst die in 2 Spalten im Verhältnis 3 : 5 aufteilen. Dann müsstest du rechnen:

3 + 5 = 8
100vw : 8 = 12.5vw
3 × 12.5vw = 37.5vw
5 × 12.5vw = 62.5vw

um anzugeben
grid-template-columns: 37.5vw 62.5vw.

Völlig unnötig. So geht’s viel einfacher:
grid-template-columns: 3fr 5fr.

🖖 Живіть довго і процвітайте