코딩스쿨

▶ CSS Grid

CSS Grid Container

CSS Grid Container: 그리드 컨테이너의 기본 개념과 활용

CSS Grid Container는 CSS Grid Layout의 핵심 구성 요소로, 그리드 레이아웃을 만들기 위한 부모 요소입니다. 그리드 컨테이너 내부에 있는 모든 자식 요소는 grid item이 되며, 그리드 레이아웃 안에서 행(row)과 열(column)에 맞춰 배치됩니다. 그리드 컨테이너를 정의하고 설정하는 방법을 이해하면 복잡한 레이아웃도 쉽게 구성할 수 있습니다.

이 가이드에서는 CSS Grid Container의 개념과 다양한 설정 방법을 설명합니다.

1. CSS Grid Container 정의하기

CSS에서 그리드 컨테이너를 만들기 위해서는 부모 요소에 display: grid 속성을 적용합니다. 그리드 컨테이너 안의 자식 요소들은 자동으로 grid item이 되어 그리드 레이아웃 규칙에 따라 배치됩니다.

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

<style>
  .container {
    display: grid; /* 그리드 컨테이너 설정 */
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

설명:

display: grid: 부모 요소를 그리드 컨테이너로 변환하여 자식 요소들이 그리드 레이아웃 규칙을 따르게 만듭니다.
.item: 각 자식 요소는 grid item이 되어 그리드 컨테이너 안에서 배치됩니다.

2. 그리드 컨테이너의 열과 행 설정

그리드 컨테이너의 핵심은 **행(row)**과 **열(column)**을 설정하는 것입니다. **grid-template-columns**와 grid-template-rows 속성을 사용해 열과 행의 크기를 정의할 수 있습니다.

<style>
  .container {
    display: grid;
    grid-template-columns: 100px 200px 100px; /* 각 열의 너비 */
    grid-template-rows: 50px 100px;          /* 각 행의 높이 */
  }
</style>

설명:

grid-template-columns: 그리드 컨테이너의 열을 정의합니다. 여기서는 첫 번째 열이 100px, 두 번째 열이 200px, 세 번째 열이 100px로 설정됩니다.
grid-template-rows: 각 행의 높이를 설정합니다. 첫 번째 행은 50px, 두 번째 행은 100px로 정의됩니다.

3. `fr` 단위로 그리드 컨테이너 설정

fr(fraction) 단위는 그리드 컨테이너의 남은 공간을 비율로 나누는 데 사용됩니다. **1fr**은 사용 가능한 공간의 1 부분을 차지한다는 의미입니다. 이 단위를 사용하면 화면 크기에 따라 자동으로 크기가 조정되는 유연한 레이아웃을 만들 수 있습니다.

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 유연한 그리드 정의 */
    gap: 10px; /* 그리드 아이템 간의 간격 */
  }
</style>

설명:

grid-template-columns: 1fr 2fr 1fr: 3개의 열이 있으며, 두 번째 열이 첫 번째와 세 번째 열보다 2배 더 넓습니다.
gap: 10px: 그리드 아이템 사이의 간격을 설정하여 공간을 만듭니다.

4. 그리드 간격 설정: `grid-gap`, `row-gap`, `column-gap`

그리드 컨테이너 안에서 아이템 간의 간격을 조정하려면 gap 속성을 사용합니다. 이 속성은 그리드 아이템 사이에 일정한 간격을 설정합니다. **row-gap**과 **column-gap**을 개별적으로 설정하여 행과 열 간의 간격을 다르게 설정할 수도 있습니다.

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* 행과 열 모두에 간격 설정 */
  }
</style>

설명:

gap: 행과 열 사이에 일정한 간격을 설정합니다. 위의 예에서는 20px의 간격이 생깁니다.

5. 그리드 아이템 자동 배치

grid-auto-flow 속성은 그리드 컨테이너가 그리드 아이템을 자동으로 배치하는 방식을 제어합니다. 기본적으로 그리드 아이템은 왼쪽에서 오른쪽, 위에서 아래로 채워지지만, grid-auto-flow 속성을 통해 행 단위 또는 열 단위로 채우는 방식을 변경할 수 있습니다.

<style>
  .container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column; /* 열을 먼저 채우도록 설정 */
  }
</style>

설명:

grid-auto-flow: column: 그리드 아이템을 먼저 열로 배치한 후 행으로 이동하게 합니다. 기본값은 row입니다.

6. 그리드 아이템이 자동으로 행이나 열을 추가하도록 설정

그리드 컨테이너의 열과 행을 명시적으로 지정하지 않더라도, **grid-auto-rows**와 grid-auto-columns 속성을 사용하여 필요한 경우 자동으로 새로운 행과 열을 추가할 수 있습니다.

<style>
  .container {
    display: grid;
    grid-auto-rows: 100px; /* 필요할 때 100px 높이의 행 추가 */
    grid-auto-columns: 100px; /* 필요할 때 100px 너비의 열 추가 */
  }
</style>

설명:

grid-auto-rows: 그리드 컨테이너에 새로운 행이 필요할 때 자동으로 추가됩니다.
grid-auto-columns: 그리드 컨테이너에 새로운 열이 필요할 때 자동으로 추가됩니다.

7. 반응형 레이아웃을 위한 `minmax()` 사용

minmax() 함수는 그리드 아이템의 최소 및 최대 크기를 지정하여 반응형 레이아웃을 더욱 유연하게 만들 수 있습니다. 이 함수는 그리드 아이템이 일정 크기 이하로 줄어들지 않으면서도, 남은 공간을 최대한 활용하게 합니다.

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
</style>

설명:

minmax(100px, 1fr): 그리드 열이 최소 100px 크기를 가지되, 남은 공간이 있으면 그 공간을 1fr로 차지하게 만듭니다.

CSS Grid Container는 그리드 레이아웃의 기초로, 행과 열을 정의하고 그리드 아이템을 배치하는 데 중요한 역할을 합니다. display: grid 속성을 사용해 그리드 컨테이너를 정의하고, 다양한 속성들을 활용하여 그리드 레이아웃을 유연하게 조정할 수 있습니다. 이 컨테이너는 복잡한 레이아웃을 쉽게 만들고, 반응형 디자인에도 매우 효과적입니다. CSS Grid의 다양한 기능을 익혀서 더 효율적이고 유연한 웹 레이아웃을 구현할 수 있습니다.

코딩 스쿨 Grid