HTML/CSS

<!--HTML-->
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <title>Minha pagina</title>
        <link rel="stylesheet" href="css/estilizando.css">
    </head>
    <body>
        <div id="main">
                <div class="header">Header</div>
                <div class="center">

                        <div class="objeto">Contet1</div>
                        <div class="objeto">Contet2</div>
                        <div class="objeto">Contet3
                            <img styles="left: 100px" src="imagens/favicon.ico">
                        </div>


                </div>
                <div class="left1">Left</div>
                <div class="right1">Right</div>
                <div class="footer">Footer</div>
        </div>
    </body>


</html>


<!--CSS-->
*{
    margin: 0 ;
    padding: 0;
    font-size: 30px;
}

#main{
    display: grid;
    grid-template-areas: "header header" "center center" "left1 right1" "footer footer";
    grid-template-rows: 15vh 40vh 30vh 15vh;

}
.fundo1{
    /* flex-direction: row; */
    width: 200px;
    box-sizing: border-box;
}

.objeto{
    border: black 1px solid;
    margin: 2px;
    width: 500px;

}

.header{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: header;

    background-color: grey;

}

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: footer;

    background-color: red;

}

.right1{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: right1;

    background-color: blue;

}

.left1{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: left1;

    background-color: yellow;

}

.center{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    grid-area: center;
    border: black 2px solid;
    background-color: blueviolet;
}

@media screen and (max-width: 768px){
    body{
        background: #cdcdcd;
    }
    #main{
        grid-template-areas: "header" "center" "left1" "right1" "footer";
    }
}