Post

CSS) grid 속성

Posted Updated
Preview Image
By parksohyunnn 6 min read

CSS 그리드 속성에 대한 완벽 가이드

CSS 그리드 레이아웃은 웹 디자인에서 강력하고 유연한 레이아웃 시스템을 제공합니다. 그리드는 복잡한 레이아웃을 단순화하고, 행과 열을 기반으로 요소를 배치할 수 있게 해줍니다. 이 블로그 글에서는 그리드 속성의 정의와 기본값, 예제 사용법 등을 다루겠습니다.

그리드 컨테이너와 그리드 아이템

그리드 레이아웃을 사용하려면 두 가지 주요 구성 요소가 필요합니다: 그리드 컨테이너와 그리드 아이템. 그리드 컨테이너는 그리드 레이아웃을 정의하는 요소이고, 그리드 아이템은 그 컨테이너 내부에 배치된 자식 요소들입니다.

그리드 컨테이너 속성

  • display: grid 그리드 레이아웃을 설정하려면 컨테이너 요소에 display: grid 또는 display: inline-grid를 적용해야 합니다.
1
2
3

.container {
  display: grid;
}
  • grid-template-columns grid-template-columns 속성은 그리드의 열을 정의합니다. 각 열의 너비를 설정할 수 있습니다.
1
2
3
4

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

-위 예제에서는 첫 번째와 세 번째 열은 동일한 너비를 가지며, 두 번째 열은 첫 번째 열의 두 배 너비를 가집니다.

  • grid-template-rows grid-template-rows 속성은 그리드의 행을 정의합니다. 각 행의 높이를 설정할 수 있습니다.
1
2
3
4
5

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px;
}

이 예제에서는 첫 번째 행은 100px 높이, 두 번째 행은 200px 높이입니다.

  • grid-gap grid-gap 속성은 그리드 아이템 사이의 간격을 설정합니다. row-gap과 column-gap 속성으로 세부 설정이 가능합니다.
1
2
3
4
5

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

위 예제에서는 모든 그리드 아이템 사이에 10px의 간격이 설정됩니다.

그리드 아이템 속성

  • grid-column grid-column 속성은 그리드 아이템이 어느 열부터 시작해서 어느 열까지 차지할지를 정의합니다.
1
2
3

.item {
  grid-column: 1 / 3;
}

이 예제에서는 해당 아이템이 첫 번째 열부터 시작해 두 번째 열까지 차지합니다.

  • grid-row grid-row 속성은 그리드 아이템이 어느 행부터 시작해서 어느 행까지 차지할지를 정의합니다.
1
2
3

.item {
  grid-row: 1 / 2;
}

이 예제에서는 해당 아이템이 첫 번째 행을 차지합니다.

그리드 속성의 응용 예제

  1. 간단한 그리드 레이아웃
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  .item {
    background-color: #ccc;
    padding: 20px;
    text-align: center;
  }
</style>

이 예제는 2x2 그리드 레이아웃을 생성하고, 각 그리드 아이템 사이에 10px 간격을 둡니다.

  1. 복잡한 그리드 레이아웃
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
  }
  .item {
    background-color: #ccc;
    padding: 20px;
    text-align: center;
  }
  .item1 {
    grid-column: 1 / 3;
  }
  .item4 {
    grid-row: 2 / 3;
    grid-column: 2 / 4;
  }
</style>

이 예제는 3x2 그리드 레이아웃을 생성하고, 특정 아이템이 여러 열 또는 행을 차지하도록 설정합니다.

결론

CSS 그리드 레이아웃은 웹 디자인에서 매우 유용한 도구입니다. 기본 속성과 사용법을 이해하면 복잡한 레이아웃도 쉽게 구성할 수 있습니다. 이 블로그 글을 통해 CSS 그리드 속성에 대한 이해를 높이고, 다양한 레이아웃을 만들어 보세요. 그리드를 사용하면 더 깔끔하고 유연한 디자인을 구현할 수 있을 것입니다.

CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github