CSS grid 레이아웃

열의 갯수와 크기 지정

grid-template-columns

• 절댓값으로

• 비율 분할 (fractions)

• 반복 지정
• grid-template-columns: repeat(열 개수, 크기)

---

행의 갯수와 크기 지정

grid-template-rows

• 절댓값으로

• 상대값은 높이가 지정되어 있을 때

• 내부 컨텐츠의 높이에 따라

---

선 번호로 영역 지정

grid-column, grid-row

ex) grid-column: 1/4 => 선 1번부터 4번 영역까지 차지

---

이름으로 영역 지정

grid-template-areas

---

grid간 공간 띄우기

• grid를 설정한 부모 요소에 사용

.wrapper {
  gap: 10px;
}