[CSS] 9. 그리드(Grid)

CSS Grid 레이아웃은 2차원(2D) 레이아웃을 위한 CSS의 강력한 도구로, 행(row)과 열(column) 모두에서 아이템을 배치할 수 있는 유연성을 제공합니다. Flexbox가 단일 축에서의 배치에 강점을 가진다면, Grid는 여러 행과 열을 조합한 복잡한 레이아웃을 쉽게 구현할 수 있습니다. 그리드 레이아웃을 사용하면 콘텐츠 영역을 자유롭게 정의하고 배치할 수 있어, 특히 반응형 웹 디자인에서 매우 효과적입니다.

1. 그리드 컨테이너(Grid Container)와 그리드 아이템(Grid Item)

Grid 레이아웃은 다음 두 가지 요소로 구성됩니다:

• Grid Container(그리드 컨테이너): 그리드 레이아웃을 정의하는 부모 요소입니다. display: grid 속성을 통해 설정됩니다.
• Grid Item(그리드 아이템): 그리드 컨테이너 안에 위치한 자식 요소들로, 그리드 셀에 배치됩니다.

예시

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 세 개의 동일한 열을 정의 */
  grid-template-rows: auto; /* 행의 높이를 자동으로 조절 */
  gap: 10px; /* 그리드 아이템 간의 간격 */
}

.item {
  background-color: lightblue;
  padding: 20px;
}

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

이 예시에서 .container는 Grid 컨테이너이며, grid-template-columns를 사용해 세 개의 열로 나누고 있습니다.

2. 그리드 트랙(Grid Track)과 그리드 셀(Grid Cell)

• 그리드 트랙(Grid Track)은 그리드의 행(row) 또는 열(column)을 나타내는 선입니다. grid-template-columns와 grid-template-rows 속성으로 트랙을 정의할 수 있습니다.
• 그리드 셀(Grid Cell)은 그리드에서 각 아이템이 배치되는 공간을 의미합니다.

예시

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 세 개의 동일한 열 */
  grid-template-rows: 100px 200px; /* 첫 번째 행은 100px, 두 번째 행은 200px */
}

HTML:

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>

3. grid-template-columns와 grid-template-rows: 그리드의 열과 행 정의

grid-template-columns와 grid-template-rows는 그리드의 열과 행을 정의하는 데 사용됩니다. 각각 열의 너비와 행의 높이를 설정하며, fr 단위는 비율을 나타냅니다. 예를 들어 1fr은 가용 공간을 균등하게 나누는 것을 의미합니다.

예시

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* 첫 번째 열은 200px, 나머지는 비율로 나눔 */
}

4. 그리드 간격(gap)과 grid-auto-rows

gap 속성은 그리드 아이템 간의 간격을 정의합니다. grid-auto-rows는 컨텐츠에 따라 행의 높이를 자동으로 조정하는 데 사용됩니다.

예시

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 아이템 간 20px의 간격 */
  grid-auto-rows: minmax(100px, auto); /* 최소 100px, 필요에 따라 자동으로 확장 */
}

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

5. grid-area로 그리드 아이템 위치 지정

grid-area 속성은 그리드 아이템이 컨테이너 내에서 어느 영역에 배치될지 명확히 정의할 수 있습니다. grid-row와 grid-column 속성으로 개별 아이템의 위치를 설정할 수 있습니다.

예시

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

.item1 {
  grid-area: 1 / 1 / 2 / 3; /* 첫 번째 행, 첫 번째 열에서 두 번째 열까지 차지 */
}

HTML:

<div class="container">
  <div class="item item1">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

6. 반응형 디자인을 위한 Grid 활용

CSS Grid는 반응형 웹사이트를 만들기에도 아주 효과적입니다. 미디어 쿼리와 함께 사용하면 다양한 화면 크기에서 그리드 레이아웃을 쉽게 조정할 수 있습니다.

예시

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* 작은 화면에서는 한 열로 배치 */
  }
}

참고 사이트

• developer.mozilla.org
• css-tricks.com
• gridbyexample.com