[CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기!

---

안녕하세요! 😊 지난번에는 반응형 웹 디자인과 media query 활용법을 배웠어요.

[반응형 웹 디자인] media query 활용법 & 모바일 대응 완벽 가이드!

 

이제 우리는 다양한 기기에서 깨지지 않는 웹사이트를 만들 수 있어요!

그런데 웹사이트를 디자인할 때 복잡한 레이아웃을 쉽게 만들 수 있는 방법이 있을까요?
정답은 바로 CSS Grid 시스템이에요! 🎨💡

 

오늘은 grid를 사용해서 더 강력하고 유연한 레이아웃을 만드는 방법을 배워볼 거예요.
자, 그럼 시작해볼까요? 🚀

---

1️⃣ CSS Grid란?

CSS Grid는 웹 페이지를 행(Row)과 열(Column)로 나누어 배치할 수 있는 강력한 레이아웃 시스템이에요.
📌 display: grid; 속성을 사용하면 가로 & 세로 정렬을 동시에 쉽게 조절할 수 있어요.

 

🔹 Flexbox와의 차이점
✔ Flexbox → 한 줄(row) 또는 한 열(column)씩 배치 (1D 레이아웃)
✔ Grid → 행과 열을 동시에 배치 가능 (2D 레이아웃)

 

✅ 즉, 복잡한 웹 페이지 디자인을 할 때는 Grid가 훨씬 편리해요!

---

2️⃣ 기본적인 grid 사용법

📌 display: grid;를 사용하면 grid container가 만들어지고, 그 안의 grid item들이 자동으로 배치돼요!

 

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 10px;
}
.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

 

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

✅ 결과: 3개의 열(Column)과 2개의 행(Row)로 구성된 레이아웃이 만들어짐!

---

3️⃣ grid-template-columns & grid-template-rows

📌 행과 열의 크기를 자유롭게 조정할 수 있어요!

 

✅ 고정 크기

grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;

➡ 각 열(Column)은 200px 너비, 행(Row)은 100px 높이로 고정됨.

 

✅ 비율 조정 (fr 단위)

grid-template-columns: 1fr 2fr 1fr;

➡ 첫 번째와 세 번째 열은 동일한 크기(1fr), 두 번째 열은 두 배 크기(2fr).

 

✅ 자동 크기 조정 (auto)

grid-template-columns: auto auto auto;

➡ 콘텐츠 크기에 맞춰 자동 조정됨.

---

4️⃣ grid-gap을 사용한 간격 조정

📌 행(Row)과 열(Column) 사이의 간격을 조절할 수 있어요!

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

✅ 결과: 각 요소 간의 간격이 20px 추가됨.

---

5️⃣ grid-area를 활용한 아이템 배치

📌 특정 아이템을 원하는 위치에 배치할 수 있어요!

 

.item1 { grid-area: 1 / 1 / 2 / 3; } /* 첫 번째 행, 첫 번째~두 번째 열 */
.item2 { grid-area: 2 / 2 / 3 / 4; } /* 두 번째 행, 두 번째~세 번째 열 */

 

<div class="container">
    <div class="item item1">A</div>
    <div class="item item2">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
</div>

✅ 결과: 특정 요소들을 원하는 행과 열에 배치할 수 있음!

---

📌 마무리 & 다음 단계는?

오늘은 CSS Grid를 활용한 강력한 레이아웃 시스템을 배웠어요!
✅ grid-template-columns와 grid-template-rows를 활용한 레이아웃 만들기
✅ grid-gap으로 간격 조절하기
✅ grid-area로 특정 위치에 배치하기

 

📢 다음 글에서는?

👉 실전 프로젝트! grid를 활용해 반응형 웹사이트 만들기
👉 CSS 애니메이션(@keyframes) 배우기! 부드러운 효과 추가하기

 

다음 글도 기대해주세요! 😊

[CSS Grid 실전 프로젝트] grid를 활용해 반응형 웹사이트 만들기!