CSS 그리드 레이아웃

CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 웹 페이지를 행과 열로 나누어 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와줍니다. 그리드 레이아웃은 가로뿐만 아니라 세로 축도 함께 다루므로, 플렉스 박스와 달리 가로/세로 모두에 대한 배치를 손쉽게 설정할 수 있습니다.

1. 기본 개념

CSS 그리드 레이아웃에서는 다음 두 가지 주요 구성 요소가 있습니다:

• 그리드 컨테이너(Grid Container): 그리드 레이아웃을 적용하는 부모 요소.
• 그리드 아이템(Grid Item): 그리드 컨테이너 내의 자식 요소.

2. 그리드 컨테이너 설정

그리드를 사용하려면 부모 요소에 display: grid 또는 display: inline-grid 속성을 지정합니다.

.container {
  display: grid;
}

---

3. 주요 속성

3.1 grid-template-columns 및 grid-template-rows

• 그리드의 열(columns)과 행(rows)을 정의하는 속성입니다.
• 값으로는 크기(픽셀, 퍼센트, fr 단위 등)를 사용할 수 있습니다.
  • fr: 남은 공간을 비율로 분배하는 단위.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3개의 열을 정의, 가운데 열이 더 큼 */
  grid-template-rows: 100px 200px;    /* 2개의 행을 정의, 첫 번째 행은 100px, 두 번째 행은 200px */
}

• 결과: 첫 번째 열과 세 번째 열은 동일한 크기를 가지며, 가운데 열이 두 배 크기를 가집니다.

3.2 grid-column-gap 및 grid-row-gap

• 그리드의 열 사이 또는 행 사이의 간격을 설정합니다.
  • grid-gap: 열과 행 간격을 동시에 설정할 수 있는 단축 속성입니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px; /* 열 사이의 간격 */
  grid-row-gap: 10px;    /* 행 사이의 간격 */
}

3.3 grid-template-areas

• 그리드 아이템을 이름으로 구분하여 배치할 수 있습니다.
• 각각의 영역에 이름을 지정하여 그리드를 시각적으로 배치할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

• 결과: header는 3개의 열을 차지하고, sidebar는 첫 번째 열, content는 두 번째와 세 번째 열을 차지하며 footer는 다시 3개의 열을 차지합니다.

---

4. 그리드 아이템 설정

4.1 grid-column 및 grid-row

• 그리드 아이템이 어느 열과 어느 행에 위치할지 지정합니다.
  • grid-column: 아이템이 어디서 시작하고 어디서 끝날지 지정합니다.
  • grid-row: 아이템의 행 위치를 지정합니다.

.item {
  grid-column: 1 / 3; /* 첫 번째 열에서 세 번째 열까지 차지 */
  grid-row: 2 / 4;    /* 두 번째 행에서 네 번째 행까지 차지 */
}

• 결과: 아이템이 첫 번째부터 세 번째 열까지, 두 번째부터 네 번째 행까지 차지하게 됩니다.

4.2 grid-area

• 그리드 아이템을 하나의 이름으로 묶어서 배치할 수 있습니다.
• 위에서 설명한 grid-template-areas 속성과 함께 사용하면 유용합니다.

.item {
  grid-area: header; /* header라는 영역에 배치 */
}

---

5. 자동 배치

5.1 grid-auto-rows 및 grid-auto-columns

• 그리드에 명시적으로 정의되지 않은 아이템이 있을 때, 자동으로 행과 열의 크기를 설정합니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px; /* 자동 생성된 행의 높이를 100px로 설정 */
}

5.2 grid-auto-flow

• 아이템이 자동으로 배치될 때 어느 방향으로 배치할지를 지정합니다.
  • row: 행을 기준으로 배치 (기본값).
  • column: 열을 기준으로 배치.
  • dense: 빈 공간이 있으면 채워 넣음.

.container {
  display: grid;
  grid-auto-flow: row dense; /* 자동으로 행 기준으로 채우되 빈 공간을 메움 */
}

---

6. 반응형 그리드

6.1 repeat() 함수

• 반복적으로 열이나 행을 정의할 수 있는 유용한 함수입니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1fr의 열을 3번 반복 */
}

6.2 minmax() 함수

• 그리드 아이템의 최소 크기와 최대 크기를 정의합니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 최소 100px, 최대 1fr */
}

6.3 반응형 그리드 예시

• 미디어 쿼리와 함께 사용하여 그리드를 반응형으로 만들 수 있습니다.

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

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* 화면이 작아지면 한 열로 정렬 */
  }
}

---

7. CSS 그리드 예제

예시 1: 기본 그리드 레이아웃

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

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2개의 열로 구성 */
    grid-gap: 10px; /* 아이템 사이에 10px 간격 */
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

예시 2: 복잡한 그리드 레이아웃

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    grid-gap: 10px;
  }

  .header {
    grid-area: header;
    background-color: lightblue;
  }
  .sidebar {
    grid-area: sidebar;
    background-color: lightgreen;
  }
  .content {
    grid-area: content;
    background-color: lightcoral;
  }
  .footer {
    grid-area: footer;
    background-color: lightgray;
  }
</style>

---

요약

CSS 그리드 레이아웃은 2차원 레이아웃을 쉽게 만들 수 있는 강력한 도구입니다. 행과 열을 자유롭게 조정하여 복잡한 레이아웃을 단순화할 수 있으며, 반응형 디자인에 매우 적합합니다. grid-template-columns, grid-template-rows, grid-area 등의 속성을 사용하여 레이아웃을 유연하게 구성할 수 있으며, 다양한 화면

크기에서도 쉽게 조정되는 반응형 레이아웃을 구현할 수 있습니다.