Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit Grid Layout

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit Grid Layout

    Hallo zusammen, hier habe mich in letzter Zeit ein bisschen mit dem Grid Layout beschäftigt und eigentlich ist es ja nicht so schwer und es klappt so weit ganz gut.

    Hier ein einfaches Beispiel:

    Code:
    <div id="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">
            <h3>main content</h3>
            </div>
       <div class="box4">box4</div>
        <div class="box5">box5</div>
    </div>
    und hier die CSS:

    Code:
    *{
        margin: 0; padding: 0;
    }
    
    body{
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
    }
    
    #container {
    
        width: 100vw;
        height: 100vh;
        background: #FFCDD2;
        display: grid;
        grid-template-areas:
            'header header header header header header'
            'header header header header header header'
            'leftnavi main main main main sidebar'
            'leftnavi main main main main sidebar'
            'leftnavi main main main main sidebar'
            'leftnavi main main main main sidebar'
            'footer footer footer footer footer footer';
    
    
    }
    
    
    
    .box1 {
        grid-area: header;
        background: #CE93D8;
    }
    .box2 {
        grid-area: leftnavi;
        background: #90CAF9;
    }
    .box3 {
        grid-area: main;
        background: #80CBC4;
    }
    .box4 {
        grid-area: sidebar;
        background: #FFF59D;
    }
    .box5 {
        grid-area: footer;
        background: #FFAB91;
    }
    Wenn man jetzt Box3 Main Content mit Inhalt befüllt, z.B ein längere Fließtext, dann verzerren sich die anderen Grid Boxen und werden kleiner. Hat jemand eine Idee warum?

  • #2
    Hallo

    Sofern du den Containern keine Breite zuweist richtet die Breite sich nach den jeweiligen Inhalten.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Zitat von MrMurphy Beitrag anzeigen
      Hallo

      Sofern du den Containern keine Breite zuweist richtet die Breite sich nach den jeweiligen Inhalten.

      Gruss

      MrMurphy
      Ist dafür nicht das Grid Layout zuständig? Ist ja alles über das Raster definiert. Größenangaben würden doch das Raster brechen, bzw überflüssig machen. Oder verstehe ich das was falsch?

      Kommentar


      • #4
        Hallo

        Du erwartest zu viel. Die automatische Größenanpassung ohne Vorgaben funktioniert nur in Ausnahmefällen wie vom Webseitenersteller gewünscht.

        Gruss

        MrMurphy

        Kommentar

        Ähnliche Diskussionen

        Einklappen

        • Amayah
          css-boxing mit 6 divs
          Amayah
          Hallo!

          Ich arbeite grad an einem neuen design, vielleicht hab ich es ein bisschen übertrieben... naja, folgendes problem, ich habe 6 divs erstellt die erstmal meine grafik darstellen sollen mit bisschen dummytext.

          Das ganze wird von einem wrapper umschlossen, der header...
          23.04.2009, 22:40
        • RaMa
          div container größe bleibt nicht gleich
          RaMa
          Hallo und guten Tag,

          ich hoffe ich habe das jetzt in den richtigen Bereich geschrieben.
          Falls nicht möchte ich mich schon mal dafür entschuldigen.

          Ich habe auch eure Suchfunktion benutzt, doch leider finde ich, für mich, keine passende Erklärung für mein Problem....
          05.06.2007, 11:02
        • SDCLeitung
          Div Element fixieren
          SDCLeitung
          Hey,
          ich habe eine "Footer Bar", in dieser wird ähnlich wie bei Facebook ein Chat integriert.

          Also ganz rechts ist ein Div Element das die Kontaktliste darstellt.
          Links davon werden die Chats beim Klick auf einen Kontakt eingebaut (via jQuery) Wenn ich nun (bei...
          21.11.2010, 15:44
        • Saitz
          Saitz hat wieder Fragen
          Saitz
          Jaaa da bin ich wieder
          So nun schreib ich alle meine Fragen in diesen Thread
          hab kein bock immer ein neuen Thread zu öffnen.
          Is glaub ich auch besser so für alle beteiligten^^


          So zur frage:

          Komme bei meinen DIV tabellen/dingern nicht weiter.
          ...
          18.06.2008, 13:27
        • nixdorf
          div
          nixdorf
          Hallo,

          schaut bitte mal hier: www.linbyte.de/soso/


          ich mochte ein layout erstellen. zunächst einern Container.
          in dem container befindet sich ober der rote header.
          darunter, immer noch im container, befindet sich dann links der Blaue bereich, in...
          31.08.2005, 20:07
        Lädt...
        X