코딩스쿨

▶ CSS Grid

CSS Grid Intro

CSS Grid Intro: 그리드 레이아웃의 기초 가이드

CSS Grid는 웹 레이아웃을 만드는 데 있어 강력하고 유연한 도구로, 2차원 그리드 기반의 디자인을 제공합니다. 이 레이아웃 시스템을 사용하면 행(row)과 열(column)로 구성된 레이아웃을 쉽게 정의할 수 있으며, 기존의 플로트(float)나 Flexbox 방식보다 훨씬 더 정밀한 제어가 가능합니다. CSS Grid는 복잡한 레이아웃을 쉽게 구현할 수 있도록 도와줍니다.

이 가이드에서는 CSS Grid의 기본 개념과 시작하는 방법을 단계별로 설명하겠습니다.

1. CSS Grid의 기본 개념

CSS Grid Layout은 2차원 레이아웃 시스템으로, 행과 열을 동시에 제어할 수 있습니다. 그리드 시스템은 grid container와 grid item으로 구성됩니다.

Grid Container: 그리드 시스템을 적용한 부모 요소입니다. 이 컨테이너 내부에 그리드 아이템이 배치됩니다.
Grid Item: 그리드 컨테이너 안에 위치한 자식 요소들로, 그리드 레이아웃 안에서 자유롭게 배치됩니다.

.container {
  display: grid;
}

2. 그리드 컨테이너 정의하기

그리드를 사용하려면, 부모 요소에 display: grid 속성을 적용해야 합니다. 이렇게 하면 해당 요소는 그리드 컨테이너가 되며, 자식 요소들은 그리드 아이템으로 작동하게 됩니다.

<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;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px; /* 그리드 아이템 간의 간격 */
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

설명:

grid-template-columns: 그리드 컨테이너의 열 크기를 정의합니다. 여기서는 1fr 1fr 1fr로 설정되어, 3개의 열이 각각 동일한 너비를 가집니다.
gap: 그리드 아이템 사이의 간격을 설정합니다. 예를 들어 10px로 설정하면 각 아이템 사이에 10px의 간격이 생깁니다.

3. 행과 열 정의하기

그리드 레이아웃은 행과 열을 자유롭게 정의할 수 있습니다. **grid-template-columns**와 grid-template-rows 속성을 사용하여 각각 열과 행을 정의할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px;
  gap: 10px;
}

설명:

grid-template-columns: 100px 200px 100px: 첫 번째 열은 100px, 두 번째 열은 200px, 세 번째 열은 100px의 고정 크기를 가집니다.
grid-template-rows: 50px 100px: 첫 번째 행은 50px, 두 번째 행은 100px로 정의됩니다.

4. `fr` 단위로 그리드 정의하기

fr(fraction) 단위는 그리드 레이아웃에서 매우 유용한 단위로, 컨테이너의 남은 공간을 비율에 따라 분배합니다. 1fr은 사용 가능한 공간의 일부를 차지한다는 의미입니다.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

설명:

grid-template-columns: 1fr 2fr 1fr: 3개의 열이 있으며, 두 번째 열은 첫 번째와 세 번째 열보다 2배 더 큰 공간을 차지하게 됩니다.

5. 그리드 아이템 배치하기

CSS Grid를 사용하면 그리드 아이템을 특정 위치에 배치하거나, 여러 열과 행에 걸쳐 배치할 수 있습니다. **grid-column**과 grid-row 속성을 사용하여 그리드 아이템이 차지할 공간을 지정할 수 있습니다.

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

설명:

grid-column: 1 / 3: 그리드 아이템이 첫 번째에서 세 번째 열까지 걸쳐 배치됩니다.
grid-row: 1 / 2: 그리드 아이템이 첫 번째 행에 위치하게 됩니다.

6. 자동 배치와 `repeat()` 사용

repeat() 함수를 사용하면 열이나 행의 정의를 반복할 수 있어 코드가 더 간결해집니다. 특히 많은 열이나 행을 동일한 비율로 나눌 때 유용합니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 동일한 크기의 3개의 열 */
  grid-template-rows: repeat(2, 100px);  /* 100px 높이의 2개의 행 */
}

설명:

repeat(3, 1fr): 동일한 크기의 열 3개를 정의합니다.
repeat(2, 100px): 100px 높이의 행 2개를 정의합니다.

7. 미디어 쿼리와 CSS Grid

CSS Grid는 미디어 쿼리와 함께 사용하면 다양한 화면 크기에 맞춘 반응형 레이아웃을 쉽게 만들 수 있습니다.

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* 모바일 화면에서는 한 열로 변경 */
  }
}

설명:

@media (max-width: 600px): 화면 너비가 600px 이하일 때, 그리드 레이아웃을 한 열로 변경합니다.

CSS Grid는 웹 레이아웃을 만들기 위한 강력한 도구로, 복잡한 레이아웃도 간단한 코드로 구현할 수 있습니다. 그리드 컨테이너와 아이템을 사용해 행과 열을 정의하고, 유연한 레이아웃을 만들 수 있으며, 반응형 웹 디자인에서도 효과적으로 활용할 수 있습니다. CSS Grid의 기본 개념을 익히면, 다양한 레이아웃을 손쉽게 구현할 수 있습니다.

코딩 스쿨 Grid