Grid

display: grid 속성에 대해 공부해보았다.
grid는 가로,세로 방향으로 flex속성보다 다양한 레이아웃을 표현한다.

그리드는
부모요소 Grid Container
자식요소 Grid Item으로 나뉩니다.
flex 처럼 column(열) 과 row(행)를 나누어준다.

grid-template-columns : 그리드 컨테이너 열 설정

grid-template-columns: 1fr 3fr;
(열을 2개로 나누고, 크기는 1:3의 비율로)
fr은 숫자 비율대로 크기를나눈다.

grid-template-rows : 그리드 컨테이너 행 설정

grid-template-rows: 100px 1fr 100px;
(행을 3개로 나누고, 크기는 100px : 1 : 100px)

grid-gap: 그리드 아이템 간격 설정;

grid-gap: 20px;

Grid 레이아웃

grid 아이템요소에 각각 이름을 부여해주고
grid 컨테이너에 grid-template-areas 으로 위치를 지정해 줄 수 있다.

grid-area: 그리드 아이템 이름;
*그리드 아이템에 작성

header{
    grid-area: header;
    background-color: tomato;
}
aside{
    grid-area: side;
    background-color: teal;
}
main{
    grid-area: main;
    background-color: yellowgreen;
}
footer{
    grid-area: footer;
    background-color: yellow; 
}

grid-template-areas: 그리드 아이템 위치조정
*grid 컨테이너에 작성

    grid-template-areas: 
    "header header"
    "side main"
    "footer footer";

    grid-template-areas: 
    "side header"
    "side main"
    "side footer";

똑같은 2행 3열의 레이아웃 이지만
그리드 아이템요소에서 이름을 지정해주고 컨테이너에서 위치를 지정 할 수 있다.
또한 미디어쿼리도 사용가능하다. 1행 4열로 지정해 줄 수 있다.

@media all and (max-width:575px){
    #container {
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 100px 1fr 100px;
    height: 100vh;
    grid-gap: 20px;
    grid-template-areas: 
    "header"
    "side"
    "main"
    "footer";
}
}