Grid einteilen mir fr oder viewport-width (vw)

[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