Grid Layout - Problem mit responsive Design

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mauric3

Neues Mitglied
30 August 2020
2
0
1
22
Hallo liebes Forum,

ich hoffe Ihr könnt mir helfen. Ich arbeite zum ersten Mal mit CSS Grid und bin noch ziemlich am verzweifeln, allerdings möchte ich Grid lernen, daher wechsle ich nicht einfach das Layout sondern warte auf eure Antworten :).

Ich habe ein fertiges Grid Layout erstellt und möchte dies beim Breakpoint von 1024px nicht nebeneinander, sondern jeden Div zu 100% Breite untereinander anzeigen lassen. Und genau da hapert es seit Stunden. Ich kopiere euch einfach mal den HTML und den CSS Code rein. Ich hab bereits Videos gesehen und mich online belesen, aber alles was ich finden konnte ist, wie ich das korrekt mache, wenn die Divs alle nebeneinander sind. Allerdings ist mein Layout ja auch ganz anders aufgebaut.. Ich lasse euch auch mal meine Demo Farben drin, damit Ihr das im Selbsttest besser erkennen könnt.

Ich hoffe Ihr könnt mir helfen.
LG
Maurice

HTML:
<div class="parent">
        <div class="div1">
            //   
        </div>
        <div class="div2">
            //
        </div>
        <div class="div3">
            //
        </div>
        <div class="div4">
            //
        </div>
        <div class="div5">
            //
        </div>
        <div class="div6">
            //
        </div>
        <div class="div7">
            //
        </div>
        <div class="div8">
            //
        </div>
        <div class="div9">
            //
        </div>
        <div class="div10">
            //
        </div>
        <div class="div11">
            //
        </div>
    </div>
CSS:
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background-color: #2d3436;
    color: #d1ccc0;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
}

.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 5px;
}

.div1 {
    grid-area: 1 / 1 / 2 / 10;
    background-color: white;
}

.div2 {
    grid-area: 2 / 1 / 3 / 5;
    background-color: purple;
}

.div3 {
    grid-area: 2 / 5 / 3 / 7;
    background-color: orange;
}

.div4 {
    grid-area: 3 / 1 / 7 / 5;
    background-color: green;
}

.div5 {
    grid-area: 3 / 5 / 5 / 6;
    background-color: brown;
}

.div6 {
    grid-area: 5 / 5 / 7 / 6;
    background-color: yellow;
}

.div7 {
    grid-area: 3 / 6 / 5 / 7;
    background-color: pink;
}

.div8 {
    grid-area: 5 / 6 / 7 / 7;
    background-color: darkred;
}

.div9 {
    grid-area: 7 / 1 / 8 / 3;
    background-color: grey;
}

.div10 {
    grid-area: 7 / 3 / 8 / 5;
    background-color: lightblue;
}

.div11 {
    grid-area: 7 / 5 / 8 / 7;
    background-color: limegreen;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Das dürfte mit diesem CSS gehen:
Code:
.parent>div {
    grid-area: unset;
}
.parent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 5px;
}
Natürlich dann in einer geeigneten Mediaquery.
gridlayout.png
 
  • Love
Reaktionen: Mauric3
Werbung: