Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit Grid Layout

Einklappen

Google Anzeige oben

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

        Lädt...
        X