[HTML+CSS] grid

먼저 wrapper라는 div 아래 4개의 div 상자들을 만든다.

 

 

박스의 부모 요소에 그리드를 설정한다. 먼저 display로 grid를 설정하고

grid-template-columns로 각 요소들의 넓이들을

grid-template-rows로 각 요소들의 높이들을 설정한다.
그리고 gird-template-areas로 그리드의 이름들을 배치해 놓는다.

(이름은 아무거나 적어도 좋다.)

중간에 보면 '.'라는 이름이 있는데, 그건 공백 지역이다.

 

 

 

각 박스의 특징을 설정하고, gird-area로 위에 gird-template-areas에 적어놓았던

이름들을 보고 놓고 싶은 곳의 이름을 넣어본다.

 

 

 

그럼 설정한 대로 박스들이 놓여있는걸 확인할 수 있다.