CSS Grid를 활용한 반응형 레이아웃 디자인 🌐

웹 개발의 세계에서 반응형 디자인은 필수적입니다. 오늘은 CSS Grid를 사용하여 어떻게 멋진 반응형 레이아웃을 디자인할 수 있는지 알아보겠습니다. CSS Grid는 웹 페이지의 레이아웃을 구성하는 강력한 방법으로, 복잡한 디자인도 쉽게 만들 수 있게 해줍니다.

CSS Grid 기본

CSS Grid를 시작하기 전에, 우리는 먼저 컨테이너에 display: grid;를 적용해야 합니다. 이것은 해당 컨테이너를 Grid 컨테이너로 만들어줍니다.

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

위 코드는 컨테이너를 3개의 동등한 열로 나누고, 각 열 사이에 20px의 간격을 추가합니다.

반응형 디자인 만들기

반응형 디자인은 다양한 화면 크기에서도 웹 페이지가 잘 보이도록 하는 것입니다. CSS Grid와 함께 미디어 쿼리를 사용하면 이를 쉽게 달성할 수 있습니다.

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

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

위의 미디어 쿼리는 화면의 너비가 600px 이하일 때, 모든 열을 하나로 합치도록 합니다. 이렇게 하면 작은 화면에서도 콘텐츠가 잘 보이게 됩니다.

실제 예제

이제 실제 예제를 통해 CSS Grid를 사용한 반응형 레이아웃을 만들어 보겠습니다.

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

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

.item {
  background-color: #f0f0f0;
  text-align: center;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

위 코드는 간단한 반응형 그리드 레이아웃을 만듭니다. 화면 크기에 따라 열의 수가 조정되어, 모든 사용자에게 최적의 레이아웃을 제공합니다.

CSS Grid를 사용하면 복잡한 레이아웃도 쉽게 만들 수 있으멀로, 웹 개발에 있어 매우 유용한 도구입니다. 오늘 배운 내용을 활용하여 멋진 반응형 웹사이트를 만들어 보세요!