Featured image of post 현대적인 디자인을 위한 CSS 서브그리드 레이아웃 이해Featured image of post 현대적인 디자인을 위한 CSS 서브그리드 레이아웃 이해
웹

현대적인 디자인을 위한 CSS 서브그리드 레이아웃 이해

CSS Subgrid가 카드 레이아웃과 하위-상위 그리드 동기화를 어떻게 단순화하는지 알아보세요.

  1. 홈
  2. Webs
  3. 현대적인 디자인을 위한 CSS 서브그리드 레이아웃 이해

CSS 그리드는 웹 레이아웃의 구조를 혁신했습니다. 그러나 일반적인 과제는 남아 있습니다. 즉, 상위 그리드 항목 내의 중첩 항목(손자 요소)을 기본 그리드 선에 정렬하는 것입니다.

이 문제는 CSS 그리드 레이아웃 사양 업데이트인 CSS Subgrid 도입으로 해결되었습니다. 이 문서에서는 CSS Subgrid의 기본 사항과 이를 카드 목록과 같은 일반적인 레이아웃 문제에 적용하는 방법을 설명합니다.

1. CSS 서브그리드란 무엇인가요?

전통적으로 Grid 컨테이너의 직계 자식만 정의된 그리드 트랙을 따라 배치될 수 있습니다. 그리드 항목 내부에 다른 그리드를 선언하면 해당 중첩 그리드는 외부 상위 그리드와 완전히 격리됩니다.

표준 “제품 카드” 레이아웃을 고려해보세요.

  • 각 카드에는 이미지, 제목, 설명이 포함되어 있습니다.
  • 제목의 길이는 다양하며 일부 제목은 여러 줄에 걸쳐 있습니다.

기존 CSS 그리드를 사용하여 카드 헤더 또는 카드 설명을 카드 전체에 걸쳐 수평으로 정렬하려면 고정 높이, 매직 여백 또는 JavaScript 재계산이 필요했습니다.

하위 그리드는 중첩된 그리드 컨테이너가 상위 컨테이너에 정의된 열 및/또는 행 트랙을 상속하고 구조적 정렬을 연결함으로써 이 문제를 해결합니다.

2. 실용 가이드: 서브그리드를 사용하여 카드 높이 정렬

중첩된 카드 요소가 콘텐츠 블록을 동적으로 정렬하는 반응형 그리드를 구현해 보겠습니다.

HTML 구조

<div class="grid-container">
  <!-- Card 1 -->
  <div class="card">
    <img src="thumb1.jpg" alt="Thumbnail">
    <h3>Short Title</h3>
    <p>A brief description goes here.</p>
  </div>
  <!-- Card 2 -->
  <div class="card">
    <img src="thumb2.jpg" alt="Thumbnail">
    <h3>This is a very long title spanning multiple lines</h3>
    <p>A longer description to showcase how the heights align.</p>
  </div>
</div>

CSS 구현

/* Parent Container Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Card Styling integrating Subgrid */
.card {
  display: grid;
  /* Card spans 3 rows in the parent grid */
  grid-row: span 3;
  /* Configure fallback values */
  grid-template-rows: auto auto 1fr;
  row-gap: 10px;
}

/* Apply Subgrid when supported */
@supports (grid-template-rows: subgrid) {
  .card {
    grid-template-rows: subgrid;
  }
}

코드 작동 방식

  • grid-row: span 3;을 지정함으로써 각 카드가 상위 컨테이너 그리드의 정확히 3개 행을 차지하도록 지시합니다.
  • grid-template-rows: subgrid; 선언은 상위 그리드의 행 정의를 상속합니다.
  • 카드 2의 헤더가 세 줄로 줄바꿈되어 확장되더라도 카드 1의 헤더는 자동으로 해당 높이와 일치합니다. 두 타이틀 모두 상위 타이틀의 동일한 가상 행 트랙을 공유하기 때문입니다.

3. 요약: 서브그리드를 사용한 현대적인 레이아웃

CSS Subgrid는 모든 주요 최신 브라우저(Chrome, Edge, Firefox, Safari)에서 완벽하게 지원됩니다. 깨지기 쉬운 JavaScript 높이 일치자가 필요하지 않으며 디자이너가 픽셀 단위로 완벽하고 유연한 그리드 레이아웃을 구성할 수 있습니다. 제품 그리드, 대시보드 위젯, 잡지 레이아웃에 사용하여 프런트엔드 UI 디자인을 향상하세요.

©2022 - 2026 Kaisekukun