Grid Layout - Problem mit responsive Design

[Mauric3]

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

<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>

*{
    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;
}

 

[Mauric3]

Das hat wunderbar funktioniert. Dankeschön <3