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

        Die neuesten Themen

        Einklappen

        • arnego2
          Antwort auf Wer kann mir diese Homepage bauen?
          Je nach Version Ja, Standort Vorteil.
          Sollte er allerdings die Shopping cart Variante haben wollen wird es teurer....
          Gestern, 20:48
        • Testie
          Antwort auf Wer kann mir diese Homepage bauen?
          180€ für eine Webseite mit 18 Unterseiten so wie es der Kunde wünscht? really?
          Gestern, 19:51
        • arnego2
          Antwort auf Wer kann mir diese Homepage bauen?
          Du kannst völlig umsonst eine Webseite bauen oder zusammenstellen es gibt hunderte von Angeboten zum selber machen die sogar das Domain oder ein Subdomain mit einschließen. Nur sollte man sein Geschäft (wenn es den eins werden wird) nicht auf billig aufbauen. Nach etwas aussehen muss eine Webseite...
          Gestern, 14:41
        • Ramsauer27
          Antwort auf Wer kann mir diese Homepage bauen?
          1. Die Videos sind meine eigene, wurden von mir erstellt. Server muss ich mir erst anschauen.
          2. Ja damit meine ich das er Zugriff zu den Kontent bekommt für den er bezahlt hat. Direkt nach der Bezahlung.
          3. Das eine was auf der Seite auffindbar ist der Free Kontent. Nachdem Sie bezahlt...
          Gestern, 10:04
        • Andre1
          Antwort auf Wetter App funktioniert nicht mehr
          Nein das ist die Standard MSN App. Also die, welche vom Anfang an drauf war, ist.

          Liebe Grüße
          Andre
          18.01.2019, 23:33

        Kostenlose Homepage bei Jimdo!

        Einklappen

        Jimdo

        Die neuesten Beiträge

        Einklappen

        • Ramsauer27
          Wer kann mir diese Homepage bauen?
          Hallo Leute!

          Ich brauche eure Hilfe. Ich brauche jemanden der mir eine Homepage bauen kann die folgendes macht, da ich mich selbst damit einfach 0 auskenne.
          Ich erstelle ein Video Trainings Kurs den Ich über E-Commerce verkaufe.

          Dazu brauche Ich:
          1. Plattform...
          18.01.2019, 20:14
        • arnego2
          Antwort auf Wer kann mir diese Homepage bauen?
          Je nach Version Ja, Standort Vorteil.
          Sollte er allerdings die Shopping cart Variante haben wollen wird es teurer....
          Gestern, 20:48
        • Testie
          Antwort auf Wer kann mir diese Homepage bauen?
          180€ für eine Webseite mit 18 Unterseiten so wie es der Kunde wünscht? really?
          Gestern, 19:51
        • arnego2
          Antwort auf Wer kann mir diese Homepage bauen?
          Du kannst völlig umsonst eine Webseite bauen oder zusammenstellen es gibt hunderte von Angeboten zum selber machen die sogar das Domain oder ein Subdomain mit einschließen. Nur sollte man sein Geschäft (wenn es den eins werden wird) nicht auf billig aufbauen. Nach etwas aussehen muss eine Webseite...
          Gestern, 14:41
        • Ramsauer27
          Antwort auf Wer kann mir diese Homepage bauen?
          1. Die Videos sind meine eigene, wurden von mir erstellt. Server muss ich mir erst anschauen.
          2. Ja damit meine ich das er Zugriff zu den Kontent bekommt für den er bezahlt hat. Direkt nach der Bezahlung.
          3. Das eine was auf der Seite auffindbar ist der Free Kontent. Nachdem Sie bezahlt...
          Gestern, 10:04
        • Andre1
          Wetter App funktioniert nicht mehr
          Hallo an alle,

          ich habe seit ca. 3 tagen meinen Laptop erneuern müssen. Nachdem er dann die neuen Updates gemachte hatte (Windows 10, Version 1809) ging meine Wetter App nicht mehr richtig. Die zeigt zwar im "Vollfenster" die richtige Stadt an aber im Startmenü nur Berlin, egal...
          10.01.2019, 21:08
        • Andre1
          Antwort auf Wetter App funktioniert nicht mehr
          Nein das ist die Standard MSN App. Also die, welche vom Anfang an drauf war, ist.

          Liebe Grüße
          Andre
          18.01.2019, 23:33
        • arnego2
          Antwort auf Wetter App funktioniert nicht mehr
          Nun das es sich um die Wetter app dreht ist klar, gibt es nur eine davon oder 25 000? Ist die App auf Deutsch dann gibt es vielleicht nur 15.
          Windows 64 war im Anfangsbetrag nicht zu erkennen. Die Windows 10, Version 1809 gibt es in 32 und 64 bit....
          18.01.2019, 22:07
        • swissc
          Neue Mobile Upload Seite
          Hallo zusammen, würde gerne eine Website auf einem PC bei mir zuhause so Bereitstellen das auf diesem eine Webseite hauptsächlich über Handy also Mobile zu besuchen ist und mit der och fotos uploaden kan und diese so sortieren sowie archivieren wie im backand eingetragen. Zbsp. Gebe ich über das...
          18.01.2019, 02:55
        • arnego2
          Antwort auf Neue Mobile Upload Seite
          Kannst du das auch geordnet Punkt für Punkt darstellen?
          Wer soll abloaden können? Und von wo, von dir Zuhaus oder von überall?...
          18.01.2019, 21:56

        homepage-forum.de - Hilfe für Webmaster! Statistiken

        Einklappen

        Themen: 56.317   Beiträge: 427.802   Mitglieder: 27.630   Aktive Mitglieder: 66
        Willkommen an unser neuestes Mitglied, Carter.

        Online-Benutzer

        Einklappen

        500 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 497.

        Mit 1.625 Benutzern waren am 17.03.2018 um 19:52 die meisten Benutzer gleichzeitig online.

        Lädt...
        X