Matthias Scharwies: CSS Grid Layout

Beitrag lesen

Servus!

Hallo,

ist es möglich, ein Grid-Layout mit CSS einfach zu gestalten, in welchem die Viewportbreite responsive in 8 Spalten geteilt wird, wobei die erste Spalte 3 x so breit ist, wie die jeweils anderen von den übrigen 7 Spalten?

Ja, natürlich:

body {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
}

/*einfacher: */
body {
  display: grid;
  grid-template-columns: 3fr repeat(7, 1fr);
}

Also teilt sich dann Spalte 1 in 30% und die restlichen 7 Spalten in je 10% des Vieports auf.

Ich habs responsive nur in 10 Spalten geschafft (und das leztlich auch nur mit einem Grid-Generator) Und über dieses CSS bin ich ebenfalls nicht wirklich glücklich. Ist zwar responsive, aber für mich nicht wirklich lesbar. Gibts da keine bessere Lösung?

Les mal im Wiki:

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste