styles.css

body {
    margin: 0;
}

/*section 1*/

#s1 {
    width: 100%;
    height: 100vh;
    background: #FFF6E3;
    position: relative;
}

.carre {
    width: 200px;
    height: 200px;
    background: #CDC1FF;
    position: absolute;
    left: 20%;
    top: 30%;
}

.carre2 {
    width: 200px;
    height: 200px;
    background: #FFCCEA;
    position: absolute;
    left: 50%;
    top: 60%;
}

.carre3 {
    width: 200px;
    height: 200px;
    background: #6fb4a1;
    position: absolute;
    left: 70%;
    top: 30%;
}


/*section 2*/

#s2 {
    width: 100%;
    height: 100vh;
    background: #BFECFF;
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(3, 200px);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

/* .parent {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(3, 200px);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
} */

.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.div3 {
    grid-area: 1 / 3 / 2 / 4;
}

.div4 {
    grid-area: 2 / 1 / 3 / 2;
}

.div5 {
    grid-area: 2 / 2 / 3 / 3;
}

.div6 {
    grid-area: 2 / 3 / 3 / 4;
}

.div7 {
    grid-area: 3 / 1 / 4 / 2;
}

.div8 {
    grid-area: 3 / 2 / 4 / 3;
}

.div9 {
    grid-area: 3 / 3 / 4 / 4;
}