CSS에서의 최신 기능들: CSS Grid Level 2 및 Subgrid

1. CSS Grid Level 2 소개

CSS Grid Level 2는 그리드 레이아웃을 위한 업그레이드된 버전으로, 다양한 레이아웃 설계를 더욱 간편하게 만듭니다. 기존의 CSS Grid보다 더 많은 기능과 제어를 제공합니다.

/* 그리드 템플릿 열 및 행 설정 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

2. Subgrid 사용하기

Subgrid는 부모 그리드 컨테이너의 그리드 행 및 열 크기를 자식 그리드에 적용할 수 있게 해줍니다. 이로써 중첩된 그리드를 더욱 효율적으로 다룰 수 있습니다.

/* 부모 그리드의 크기를 자식 그리드에 적용 */
.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: subgrid;
}

.child-grid {
  display: grid;
  /* 자식 그리드에 부모 그리드의 행 크기 적용 */
  grid-row: 1 / span 2;
}

3. 그리드 라인 네임

그리드 라인 네임은 특정 그리드 라인에 이름을 부여하여 레이아웃을 더 직관적으로 제어할 수 있게 합니다.

/* 그리드 라인 네임 설정 */
.grid-container {
  display: grid;
  grid-template-columns: [start] 1fr [main] 2fr [end];
  grid-template-rows: [top] 100px [content] 1fr [bottom];
}

4. 예제: 정사각형 그리드 레이아웃

이제 이러한 기능들을 활용하여 간단한 예제를 만들어보겠습니다. 정사각형 그리드 레이아웃을 구성해봅시다.

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

.grid-item {
  background-color: #3498db;
  color: #fff;
  text-align: center;
  padding: 20px;
}

<!-- HTML 구조 -->
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

이제 위의 코드를 이용하여 정사각형 그리드 레이아웃을 만들어 보겠습니다. 각 그리드 아이템은 색상이 적용된 박스로 나타나게 됩니다.

이상으로 'CSS에서의 최신 기능들: CSS Grid Level 2 및 Subgrid' 주제의 블로그 포스팅을 마치겠습니다. 레이아웃 디자인에서 이러한 기능을 활용하면 보다 효율적이고 유연한 웹 페이지를 구성할 수 있습니다.