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: ~~~CSS 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](https://jsfiddle.net/ca21/gxxznpjL/) 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: * [CSS/Eigenschaften/grid/implizite_Erzeugung_von_Rastern](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid/implizite_Erzeugung_von_Rastern) * [CSS/Anwendung_und_Praxis/Layout_mit_Grid](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Layout_mit_Grid) Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

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: ~~~CSS 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](https://jsfiddle.net/ca21/gxxznpjL/) 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? > > Lukas Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}