CSS 그리드 레이아웃의 기본 원리와 활용법 🌐

웹 개발을 배우는 여러분, CSS 그리드 레이아웃으로 멋진 웹 페이지를 디자인하는 방법을 알려드릴게요! CSS 그리드는 웹 페이지를 구성하는 데 필요한 강력한 도구 중 하나로, 복잡한 레이아웃을 쉽고 빠르게 만들 수 있게 도와줍니다.

CSS 그리드 레이아웃이란?

CSS 그리드 레이아웃은 웹 페이지의 요소를 격자(grid) 형태로 배치할 수 있게 해주는 CSS의 기능입니다. 이를 통해, 개발자는 페이지의 구조를 더 세밀하게 제어할 수 있으며, 다양한 화면 크기와 해상도에서도 일관된 레이아웃을 유지할 수 있습니다.

기본 사용법

CSS 그리드를 사용하기 위해서는 먼저 컨테이너 요소에 display: grid; 속성을 적용해야 합니다. 이렇게 하면 해당 요소의 자식 요소들이 그리드 아이템으로 동작하게 됩니다.

.container {
  display: grid;
}

그리드 레이아웃을 구성할 때는 주로 grid-template-columns와 grid-template-rows 속성을 사용하여, 각각의 열과 행의 크기를 정의합니다.

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

위 코드는 컨테이너에 3개의 열과 3개의 행을 만들며, 각각의 크기를 지정합니다. auto 값은 컨텐츠의 크기에 따라 자동으로 조정됩니다.

간단한 예제

아래는 CSS 그리드를 사용한 간단한 예제입니다. 여기서는 2개의 열과 2개의 행을 가진 그리드 레이아웃을 만들어 보겠습니다.

HTML:

<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>

CSS:

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

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
}

이 예제에서는 .container에 grid-template-columns와 grid-template-rows 속성을 사용하여 각각 2개의 열과 행을 만들었습니다. 1fr은 사용 가능한 공간을 균등하게 분배하라는 의미입니다. gap 속성은 그리드 아이템 사이의 간격을 지정합니다.

CSS 그리드 레이아웃을 활용하면, 복잡한 웹 페이지의 레이아웃도 쉽게 구성할 수 있습니다. 이 기초를 바탕으로 더 다양한 속성과 기능을 탐색해 보세요. Happy coding! 🚀