CSS Grid Layout

[Lukas.]

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? 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?

Lukas

[Matthias Scharwies]

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:

• CSS/Eigenschaften/grid/implizite_Erzeugung_von_Rastern

• CSS/Anwendung_und_Praxis/Layout_mit_Grid

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

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)

Deine divs haben kein grid, sondern verwenden float, das sollte man so nicht mehr tun.

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

• CSS/Anwendung_und_Praxis/Layout_mit_Grid

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Lukas.]

Hi Matthias,

danke für den Tip. Ich les mir das gleich mal durch!

Gruß, L.