[CSS] grid 레이아웃

2m7r·2025년 3월 17일

css

목록 보기
7/7

🚀 CSS Grid 완전 정복!📌

🎯 CSS Grid란?

CSS Grid는 웹 페이지 레이아웃을 설계하는 강력한 2D 시스템!
👉 행(Row)과 열(Column) 기반으로 정확한 위치에 요소를 배치할 수 있다!

✔ 정확한 위치 배치 & 유연한 크기 조정 가능
✔ grid-template, grid-area, fr, auto-fill 등으로 완벽한 디자인 가능

🔥 1️⃣ 핵심 개념 빠르게 이해하기!

🎯 개념설명
Grid 컨테이너display: grid;를 적용한 부모 요소, 그리드 시스템의 기반
Grid 아이템컨테이너 내부의 자식 요소들
grid-template행(grid-template-rows)과 열(grid-template-columns) 크기 설정
fr 단위CSS Grid에서 사용되는 유연한 비율 단위 (fraction, 가용 공간 비율)
grid-gap행과 열 사이의 간격 (gap: 10px;)
grid-area특정 영역을 지정해 배치 (grid-template-areas)
auto-fit vs auto-fill자동으로 칸을 채우거나 늘리는 방식 차이

💡 auto-fit vs auto-fill 차이
auto-fill : 가능한 한 많은 열을 채우고, 빈 칸을 남김
auto-fit : 가능한 한 많은 열을 채우고, 남은 공간을 늘림

✅ 2️⃣ 기본 구조: 쉽게 이해하는 Grid

.grid-container {
    display: grid; /* 그리드 활성화 */
    grid-template-columns: 1fr 2fr 1fr; /* 3개 열: 중간이 2배 크기 */
    grid-template-rows: 100px auto 100px; /* 3개 행 */
    gap: 10px; /* 간격 */
}

💡 이 코드의 의미?

  • display: grid; → 이 요소가 그리드 컨테이너가 됨!
  • grid-template-columns: 1fr 2fr 1fr; → 세로 3줄인데, 중간이 2배 크기!
  • gap: 10px; → 아이템들 사이의 간격을 10px로 설정!

🔽 결과 예상 모습

🚀 3️⃣ 실전 적용 – 예제 코드로 바로 익히기!

📌 상황 1: 카드 UI 만들기

👉 반응형 카드 레이아웃! 자동으로 크기 조정됨 ✅ 

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

🔥 auto-fill을 사용하면 빈 공간을 최대한 활용하면서 반응형 레이아웃을 쉽게 만들 수 있어!

📌 상황 2: 복잡한 웹 레이아웃 만들기

👉 3줄로 깔끔하게 배치! 

.layout {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px auto 50px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

🚀 grid-template-areas를 사용하면 코드가 직관적으로 변하고, 유지보수가 쉬워짐!

👀 시각화

🔥 CSS Grid의 장점

🌟 복잡한 레이아웃 구현
행(Row)과 열(Column)을 한 번에 다룰 수 있어, 대칭적인 구조가 필요할 때 유리함.

📐 2D(행+열) 배치 최적화
grid-template-areas를 사용하면, header, sidebar, content, footer 같은 전체 레이아웃을 직관적으로 배치 가능.

⚡ 간결한 코드
display: grid; 한 줄로 바로 적용! Flexbox보다 코드가 짧아짐.

📏 비율 조정이 쉬움
fr 단위를 사용하면 열과 행 크기를 자동으로 조정 가능.

🎯 정렬이 강력함
justify-items, align-items 등을 사용해 요소를 쉽게 중앙 정렬할 수 있음.

🔲 갭(gap) 설정 가능
gap: 10px;만으로 간격을 조정할 수 있어 margin을 따로 안 써도 됨.

🌍 브라우저 지원이 좋음
IE11을 제외하면 대부분의 최신 브라우저에서 완벽 지원!

❌ CSS Grid의 단점

⛔ 1차원 레이아웃엔 불필요
단순한 수평(Horizontal) 또는 수직(Vertical) 정렬이라면 Flexbox가 더 적합.

⚠️ 요소 크기가 가변적이면 대응 어려움
grid-template-columns: 1fr 2fr; 같은 설정은 가변 콘텐츠에서 예상과 다르게 동작할 수 있음.

🛑 자동 정렬 기능 부족
Grid는 박스를 채우는 개념이라서, 요소가 많아질 때 자동 정렬은 어려움.

❌ 복잡한 동적 콘텐츠엔 비효율적
동적으로 추가/삭제되는 요소라면, Flexbox가 더 유연함.

🚫 IE11에서 지원 부족
Grid는 IE11에서 제대로 동작하지 않음. 호환성을 고려해야 함.

언제 쓰면 좋을까?

🌐 CSS Grid

  • 웹페이지 전체 레이아웃
  • 반응형 카드형 UI (ex. Pinterest 스타일)
  • 대칭형 그리드 필요 시

💡 Flexbox

  • 단순한 수평/수직 정렬
  • 유동적인 크기 조정
  • 동적 UI, 버튼 그룹, 채팅 UI

🚀결론

✅ 정형화된 레이아웃이 필요할 때 → CSS Grid
✅ 유동적인 요소 정렬이 필요할 때 → Flexbox

💡 실전 적용 팁!

  • 🛠 웹사이트의 기본 틀 (헤더, 사이드바, 컨텐츠, 푸터) → CSS Grid
  • 🔄 가변적인 리스트 (버튼 그룹, 네비게이션 바, 채팅) → Flexbox
  • 📱 반응형 카드형 UI → CSS Grid (auto-fill 활용!)

🔥 Grid와 Flexbox를 적절히 조합해서 좋은 UI를 만들어보자! 🚀

🔍 CSS Grid의 현황

🚀 최신 기능

📈 CSS Grid 현재

  • 반응형 웹 디자인 필수 요소: 2차원 레이아웃 제공 → 다양한 화면 크기 대응 가능
  • 창의적인 디자인 구현: 복잡한 레이아웃도 간결한 코드로 가능 → 유연한 디자인 적용

💡 CSS Grid 활용 팁

  • Subgrid 활용: 중첩된 레이아웃에서도 부모 설정 유지 → 디자인 일관성 증가, 코드 간소화
  • 그리드 생성기 사용: 손쉬운 프로토타이핑 → 디자인 생산성 향상
  • CSS Grid와 Flexbox 조합
    → 페이지 전체는 Grid, 내부 요소는 Flexbox : 복잡한 레이아웃에서도 유연성과 정밀성 확보

🔧 실전 적용 사례

profile
2m7r
뒤돌면 까먹는 나를 위해! .oO
이전 포스트

[CSS] 애니메이션 속성 : direction, fill-mode

0개의 댓글