Grid안에서 Grid layout

subgrid를 쓰지않아도 적용가능

header, visual, body, footer로 나눈뒤 body안에서 aside, main으로 나눈다.

PC형에 먼저 맞춘 후 태블릿형 미디어쿼리 적용

html,body{
    height: 100%;
    margin:0;
}

/* --------------------------------------------------------------- */
.float-content{
    width:960px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    min-height:inherit;
    opacity: 0.7;    
    /* height: inherit; */

}

#root{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 70px 171px 1fr 100px;
    grid-template-areas: 
    "header header header header"
    "visual visual visual visual"
    "body body body body"
    "footer footer footer footer";
}

#header{
    background-color: #ffffff;
    grid-area: header;
}

#visual{
    border-top:3px solid #8CBA34;
    background:#313131 url("../images/bg-visual.png") no-repeat center;
    grid-area: visual;
}

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ". aside main .";

}

#aside{
    background-color: blue;
    grid-area: aside;
}

#main{
    background-color: blueviolet;
    grid-area: main;
}

#footer{
    background-color: #313131;
    grid-area: footer;
}
/*pc먼저 스타일링*/
@media screen and (min-width: 500px){/*500이 넘어가면*/

}

@media screen and (max-width: 960px){/*800보다 작아지면*/
.float-content{
    width:100%;
}
#root{ /*덮어쓰기할것만 넣기*/
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    grid-template-areas: 
    "header"
    "visual"
    "body"
    "footer";
    }

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    }

#main{
        background-color: blueviolet;
        grid-area: main;
    }
}