grid 레이아웃

부모 태그에 display: grid속성을 주고,

grid-template-columns, rows를 설정 해 준다.

가로가 네 칸이게 하고싶으면 columns: 1fr 1fr 1fr 1fr; 처럼 해 주면 된다.

(fr은 비율로 나누는 것인데 그냥 px단위나 %로 써도 된다)

세로는 똑같이 row에 해 주면 된다.

---

여러 칸을 차지하고 싶을 때 방법 1

grid container 내부에 있는 박스를 하나 선택해서, 새로 클래스를 부여하고

grid-column 속성을 준다.

위 사진에서는 grid-column: 1/3; 으로 되어있는데, 가로줄 첫번째~세번째 줄까지 차지해달라는 말이 된다.

 

---

여러 칸을 차지하고 싶을 때 방법2

자식 태그에는 grid-area: 영역이름; 을 설정 해 주고,

부모 태그인 grid-container에서

grid-template-areas 속성을 준다.

"영역명 영역명 영역명"

" . . ."

이런식으로 값을 줄 수 있다.