CSS Grid Layout

CSS Grid는 2차원(행과 열)의 레이아웃 시스템을 제공한다.
** flexible : 비교적 단순한 1차원 레이아웃

1. grid-template-rows,
grid-template-columns

• 행의 크기 정의함
• 라인의 이름 정의함
• fr (fraction, 공간비율) 단위 사용가능
  **적절한 비율로 공간 나눠줌
• repeat() 함수 사용 가능

** ex1)1200px 너비의 12컬럼 그리드 템플릿 정의
① repeat함수 사용

.container{
	width:1200px;
    grid-template-columns:repeat(12, 100px); 
}

② fr단위 사용해 비율로 지정

.container{
	width:80%;
    grid-template-columns:repeat(12, 1fr);  
}

③ repeat()함수는 2번째 인수를 반복하기 때문에 다음과 같이 활용 가능

.container{
	grid-template-columns:repeat(4, 100px 200px 50px);
}
.container{
	grid-template-columns:repeat(4, 1fr 2fr 3fr);
}

---

2. grid-template-areas

: 지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿 생성하며,
grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성임

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

• 마침표(.)를 사용하거나 none을 입력해 빈 영역 정의 가능

.container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main . ."
    "main . aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

---

3. grid-template

: grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성

.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}
header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

▼하단과 같이 해석할 수 있음

.container {
  display: grid;
  grid-template-rows: 80px 350px 130px;
  grid-template-columns: 2fr 100px 1fr;
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}