MDN : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout

0. 용어

---

• Grid container
  : 부모 요소. grid를 적용하는 grid 전체 영역이다. grid container 안의 요소들이 grid 규칙에 따라 정렬된다.
• Grid item
  : 자식 요소.
• Grid track
  : griddml 행 또는 열

1. 부모 요소 설정

---

.wrapper {
  display: grid;
}

2-1. 부모요소에서 열/행 갯수와 크기 설정

---

○ 열의 갯수와 크기 설정

👉 grid-template-columns

• 절대값으로 지정하기

.wrapper {
  grid-template-columns: 100px 200px 300px;
}

• 비율 분할하기 (fractions

.wrapper {
  grid-template-columns: 1fr 2fr 3fr 4fr;
}

• 혼합해서 사용하기

.wrapper {
  grid-template-columns: 200px 1fr 3fr;
}

.wrapper {
  grid-template-columns: 100px 200px auto;
}

• 반복 하기

.wrapper {
  grid-template-columns: repeat(3, 1fr);
}
  /* grid-template-columns: 1fr 1fr 1fr; */

👉 auto-fill / auto-fit

갯수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

auto-fill : 너비를 20%로 설정해서 5개보다 많으면 5개 넘을 때부터 내려고 5개보다 적으면 그 공간은 비게 된다.

.wrapper {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fit : 남는 공간을 셀이 가득채우게 한다.

○ 행의 갯수와 크기 설정

👉 grid-template-rows

열의 지정과는 달리 상대값은 container의 높이가 지정되어야 한다.

.wrapper {
  grid-template-columns: repeat(3, 1fr);
  height: 800px;
  grid-template-rows: 1fr 2fr 3fr;
}

👉 minamax()

• 행/열 (track)의 '최소/최대 크기'를 정의한다.
• 첫 번째 인수는 min값, 두 번째 인수는 max값이다.
• 일반 요소에 min-width와 max-width 속성을 지정하는 것과 유사하다.
• 최대값을 지정하지만 item 안에 포함된 내용보다 작아질 수는 없다. (아래예제)

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

2-2. 영역이름 지정

---

👉 grid-template-areas

지정된 그리드 영역 이름을 참조해 그리드 템플릿을 생성한다.
빈 공간은 . 또는 none으로 정의할 수 있다.

.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; }

grid-area는 grid item에 적용하는 소것ㅇ으로, area 이름을 명시해준다.

👉 grid-template

grid-template-rows, grid-template-columns, grid-template-area를 합쳐서 나타낼 수 있다. 위의 예제와 아래의 예제는 동일하다.

.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";
}

2-3. 간격 설정

👉 gap

.container {
  gap: <grid-row-gap> <grid-column-gap>;
}

.container {
  gap: 10px 0; /* row-gap */
  gap: 0 10px; /* column-gap */
}

grid-row-gap에서 접두사 grid-는 더이상 쓰지 않고 (deprecated), 따로 쓰는 경우에는 row-gap을 사용한다. 일부 버전에서는 브라우저 지원으로 인해 접두사 사용을 고려해 볼 수 있다.

참고:https://studiomeal.com/archives/533
https://heropy.blog/2019/08/17/css-grid/