Grid . 2 - Grid Template Areas

그리드 템플릿의 영역 지정에 대해서 알아보자.

4개의 박스를 그리드로 지정하고 grid-template-columns를 200px씩 지정해주고

grid-template-rows를 300px씩 지정해줬다.

이걸 간편하게 쓰는 방법이 있는데 바로 repeat()함수를 사용하면된다.

repeat( lines, px ) 이런 식으로 지정해주면 된다.

상기 이미지의 경우 rows와 columns를  repeat(4, 200px), repeat(4, 300px)로 지정하면된다.

 

자 이상태에서 html의 골격에 맞게 

header는 위쪽 가운데 content와 nav를 가장 아래 footer를 넣어주자

이때 사용할 속성이 grid-template-areas: 이다!!

 

사용방법은 먼저 내가 배치하고 싶은 박스들에 이름을 지정해준다.

바로 자식요소 박스들에게 grid-area: header, grid-area:content 등등

이렇게 지정해준다.,

그리고 부모요소에

grid-template-areas:

  "header header header header"

  "content content content nav"

  .....

   ....;

이런식으로 ~~

 이렇게 말이다

이렇게 해주면!~!~! 짠!

 이렇게! 각 영역이 내가 원하는 위치들에 정해진다!!

 

와우 html전체를 관장할 수 있게 된다.

developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

grid-template-areas - CSS: Cascading Style Sheets | MDN