CSS Grid : 기본 개념

Created: Aug 4, 2020 12:41 PM
Materials: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout
Reviewed: No

Grid container

display: grid 또는 display: inline-grid로 정의

---

Grid track

명시적(explicit) 트랙 정의

• grid-template-columns
• grid-template-rows

잠재적(implicit) 트랙 정의

grid-template-* 으로 정의한 트랙보다 컨텐츠의 개수가 더 많으면 그리드는 자동으로 그리드에 새로운 행과 열을 만든다. 이렇게 생성된 트랙을 잠재적(implicit) 트랙이라고 한다. 잠재적 트랙은 내부 content에 따라 크기가 조정된다.

만약 잠재적 그리드에서 생성된 트랙 크기를 수동으로 조절하고 싶다면 다음 프로퍼티를 사용한다.

• grid-auto-columns
• grid-auto-rows

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

Track size

fr 단위

fraction을 말한다. 그리드에서 fr단위를 사용하면 그리드를 쪼갠다.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
// 그리드를 4개로 쪼갠다.
// 첫번째 트랙에 2칸 크기를 준다.
// 번째, 세번째 트랙에 1칸 크기를 준다.

ex) grid-template-columns : 500px 1fr 2fr
- 첫 번째 트랙은 500px로 고정된다.
- 나머지 공간을 3개로 쪼갠 후, 나머지 트랙에 1fr 2fr 만큼 할당한다.

트랙 하나를 고정하고, 나머지를 fr로 지정할 수도 있다.

.wrapper {
  display: grid;
  grid-template-columns : 500px 1fr 2fr
}
// 첫 번째 트랙은 500px로 고정된다.
// 나머지 공간을 3개로 쪼갠 후, 나머지 트랙에 1fr 2fr 만큼 할당한다.

minmax(최소,최대)

트랙의 최소, 최대 크기를 지정한다. 보통 fr을 썼을 때 트랙이 너무 작아지는 것을 방지하기 위해 함께 사용한다.

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

---

Grid line

라인을 이용한 아이템 배치

• grid-column-start , grid-column-end === grid-column : start/end
• grid-row-start, grid-row-end === grid-row : start/end

start line에 아이템을 배치한다.

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

// grid-column은 item 프로퍼티 이므로 container 가 아닌 item에 설정
.wrapper > div:nth-child(5) {
  grid-column: 1; // start line을를 1로 준다.
}

end line까지 아이템을 확장한다.

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

.wrapper > div:nth-child(5) {
  grid-column: 1/4; // start line : 1, end line : 4
}

Z-index를 이용한 아이템 중첩 순서 조정

라인 번호로 아이템을 배치하면 두 아이템이 서로 중첩될 수 있다.

wrapper > div:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/3;
}

.wrapper > div:nth-child(2) {
  grid-column: 1;
  grid-row: 2/4;
}

아이템에 z-index 속성을 부여해 우선순위를 부여할 수 있다. 우선순위가 높은 아이템이 더 위로 표시된다.

.wrapper > div:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/3;
  z-index: 2;
}

.wrapper > div:nth-child(2) {
  grid-column: 1;
  grid-row: 2/4;
  z-index: 1;
}

---

Grid cell

셀 사이 경계 여백

• grid-column-gap, grid-row-gap === grid-gap

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-column-gap: 10px;
  grid-row-gap: 30px;
}

---

그리드 중첩

그리드 아이템은 그리드 컨테이너가 될 수도 있다. 이 경우 중첩된 그리드는 상위 부모 그리드와 아무 관계가 없다. (부모 그리드의 grid-gap, grid-column 등등 아무것도 상속받지 않음)

display : subgrid로 부모 그리드를 상속받을 수 있다. but 지원하는 브라우저가 한정적며, 잠재적 그리드 개념이 적용되지 않으므로 사용을 지양한다.