css의 grid

grid-template-columns : 그리드의 세로기준

grid-template-rows : 그리드의 가로 기준

grid-template-areas: 그리드의 위치지정

grid-areas: 저장한 위치값 설정

grid-gap : 그리드 사이의 공간

---

> grid-template-columns,rows

.container {
    display: grid;
    grid-template-columns: 1fr 1fr; //1fr 1fr (1씩 나눠갖는 경우)
    grid-template-rows: 200px 200px 200px;
    width: 400px;
    height: 600px;
    border: 1px solid black;
    color: white;
}

->

---

> grid-template-columns,rows

.container {
    display: grid;
    grid-template-columns: 2fr 1fr; // 2fr과 1fr으로 나눠갖는다
    grid-template-rows: 200px 200px 200px;
    width: 400px;
    height: 600px;
    border: 1px solid black;
    color: white;
}

->

---

> grid-template-areas

.container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 200px 200px 200px;
    grid-template-areas:
    "top top"
    "left right"
    "bottom bottom" ;
}
.aaa {
    grid-area: top;
}
.bbb {
    grid-area: left;
}
.ccc {
    grid-area: right;
}
.ddd {
    grid-area: bottom;
}

> 클래스에 각자 위치해야 할 grid-area를 써준다

주의사항

>1fr 1fr 1fr같이 섹션이 3개로 나눠져 있다면 grid-template-areas 또한 3개로 적어줘야 한다 

ex) "top top top"