Lukas.: CSS Grid Layout

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

  1. 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
    1. 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:

      Herzliche Grüße

      Matthias Scharwies

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Hi Matthias,

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

        Gruß, L.