그리드 템플릿(Grid Template): grid-template-areas / grid-template

 

📌 Grid Template

 

🔶 body 태그는 기본적으로 뷰포트의 너비를 쓴다.  
body의 높이는 기본값이 없음 👉 100vh를 설정해야 함

body {
   height: 100vh;
}

 

 

---

 

📌 grid-template-areas: "작명"

: grid의 템플릿을 디자인할 수 있는 속성

 

• 꼭 태그명을 사용할 필요 ❌
  👉 임의로 작명 후 해당 태그에 grid-area를 선언해서 템플릿과 연결시키기

body {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    
    grid-template-areas:
      "header header header header"
      "content content content menu"
      "footer footer footer footer";
}

 

 

 

 

 

📌 grid-area

grid-area: 작명;

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;

• 템플릿에 사용된 grid 이름을 정의하여 템플릿과 연결시킴
• 작명 = grid-template-areas에서 작명한 이름

 

 

 

---

 

 

📌 grid-template

grid-template: 
   "작명..." 행 크기(ex. 1fr)
   "작명..." 행 크기(2fr)
   "작명..." 행 크기(1fr) / 열 크기(1fr 1fr 1fr 1fr);

 

• grid 템플릿 + 행 크기 + 열 크기 설정

body {
   grid-template:
       "a a a a" 1fr
       "b b b c" 2fr
       "d d d d" 1fr / 1fr 1fr 1fr 1fr;
}

 

 

 

---

 

 

출처

노마드코더 CSS Layout 마스터클래스