M

MLOG

한국어

CSS 서브그리드를 탐색하고, 현대적인 웹 디자인을 위한 복잡하고 반응형이며 유지보수가 용이한 중첩 레이아웃 생성법을 배우세요. 고급 그리드 기술을 마스터하세요.

CSS 서브그리드: 중첩 레이아웃의 힘을 발휘하다

CSS 그리드는 웹 레이아웃에 혁명을 일으켜, 비할 데 없는 유연성과 제어 기능을 제공합니다. 하지만 중첩된 그리드를 관리하는 것은 때때로 번거로워질 수 있습니다. 바로 이 지점에서 CSS 서브그리드가 구세주 역할을 합니다. 서브그리드를 사용하면 그리드 아이템이 부모 그리드의 트랙 크기를 상속받을 수 있어, 복잡한 레이아웃을 단순화하고 코드를 더 유지보수하기 쉽게 만듭니다. 이 글은 모든 수준의 개발자를 위해 CSS 서브그리드를 이해하고 구현하는 방법에 대한 포괄적인 가이드와 실용적인 예제, 통찰력을 제공합니다.

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

서브그리드는 CSS 그리드의 기능으로, 그리드 아이템이 스스로 그리드가 되어 부모 그리드에 의해 정의된 행과 열 트랙을 상속받을 수 있게 합니다. 이는 각 중첩 그리드에서 명시적으로 트랙 크기를 정의하지 않고도 여러 중첩 그리드에 걸쳐 콘텐츠를 정렬할 수 있음을 의미합니다. 부모 그리드의 구조를 자식 그리드로 확장하여 더 응집력 있고 일관된 레이아웃을 만드는 방법이라고 생각하면 됩니다.

왜 서브그리드를 사용해야 하는가?

브라우저 호환성

구현에 앞서 브라우저 호환성을 확인하는 것이 중요합니다. 2023년 후반 기준으로 서브그리드는 크롬, 파이어폭스, 사파리, 엣지를 포함한 최신 브라우저에서 잘 지원됩니다. 하지만 항상 Can I use를 사용하여 최신 지원 상태를 확인하는 것이 좋습니다.

기본 서브그리드 구현

서브그리드의 기본 개념을 설명하기 위해 간단한 예제부터 시작하겠습니다.

HTML 구조

먼저, 그리드를 위한 기본 HTML 구조를 정의합니다.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS 스타일링

이제 부모 그리드와 .content 요소 내의 서브그리드를 생성하는 CSS를 정의해 보겠습니다.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* .content 서브그리드 내부 아이템 배치 정의 */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

이 예제에서 .content 요소는 서브그리드로 정의됩니다. grid-template-columns: subgrid;와 grid-template-rows: subgrid; 속성은 서브그리드가 부모 그리드로부터 트랙 크기를 상속받도록 지시합니다. 이제 content 영역은 서브그리드 자체에 대한 명시적인 설정 없이도 메인 컨테이너 그리드에 정의된 트랙 크기를 따르게 됩니다. 이는 사이드바와 content 영역 내의 아이템들 간의 완벽한 정렬을 보장합니다.

고급 서브그리드 기술

트랙 확장

서브그리드는 또한 서브그리드 내의 아이템들이 일반 그리드에서처럼 여러 트랙에 걸쳐 확장될 수 있도록 합니다. 이는 복잡한 레이아웃을 만드는 데 훨씬 더 많은 유연성을 제공합니다.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

이 코드는 .item-1이 서브그리드의 첫 두 열에 걸쳐 확장되도록 만듭니다.

이름 있는 그리드 라인

더 명확하고 제어력을 높이기 위해 서브그리드와 함께 이름 있는 그리드 라인을 사용할 수 있습니다. 부모 그리드에 이름 있는 라인이 있다고 가정해 봅시다:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

그런 다음 서브그리드 내에서 이러한 이름 있는 라인을 참조할 수 있습니다:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

암시적 트랙 처리

그리드 아이템의 수가 부모 그리드에 정의된 트랙의 수를 초과하면, 서브그리드는 암시적 트랙을 생성합니다. 일반 CSS 그리드와 유사하게 grid-auto-rows 및 grid-auto-columns 속성을 사용하여 이러한 암시적 트랙의 크기를 제어할 수 있습니다.

실용적인 예제 및 사용 사례

서브그리드를 사용하여 정교한 레이아웃을 만드는 몇 가지 실용적인 예제를 살펴보겠습니다.

복잡한 상품 목록

여러 상품 세부 정보(이미지, 이름, 설명, 가격)를 일관되고 정렬된 방식으로 표시하려는 상품 목록을 상상해 보세요. 서브그리드는 이를 쉽게 달성하는 데 도움이 될 수 있습니다.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

이 예제에서 .product 요소는 서브그리드를 사용하여 콘텐츠 길이가 다르더라도 모든 상품에 걸쳐 이미지, 이름, 설명 및 가격을 일관되게 정렬합니다. 이는 깔끔하고 전문적인 표현을 보장합니다.

잡지 레이아웃

다양한 콘텐츠 블록으로 잡지 스타일의 레이아웃을 만드는 것은 어려울 수 있습니다. 서브그리드는 레이아웃의 다른 섹션에 걸쳐 요소를 정렬할 수 있게 하여 프로세스를 단순화합니다.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

이 예제에서 메인 기사, 사이드바 기사 및 특집 이미지는 모두 동일한 그리드 구조를 공유하여 다른 섹션에 걸쳐 제목과 콘텐츠의 일관된 정렬을 보장합니다. 서브그리드를 사용하면 CSS가 단순화되고 레이아웃의 유지보수성이 향상됩니다.

폼 레이아웃

정렬된 레이블과 입력 필드로 복잡한 폼 레이아웃을 만드는 것은 까다로울 수 있습니다. 서브그리드는 간단한 해결책을 제공합니다.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* 부모 그리드에서 트랙 크기 정의 */
    gap: 10px;
}

여기서 .form-row 요소는 서브그리드를 사용하여 모든 행에 걸쳐 레이블과 입력 필드를 일관되게 정렬합니다. 트랙 크기는 부모 그리드(.form-grid)에 정의되어 균일한 모양을 보장합니다.

모범 사례 및 고려 사항

서브그리드 vs. 일반 CSS 그리드

서브그리드와 CSS 그리드 모두 강력한 레이아웃 도구이지만, 서로 다른 목적을 가지고 있습니다. 일반 CSS 그리드는 전체 페이지 레이아웃을 만들고 콘텐츠의 기본 구조를 정의하는 데 이상적입니다. 반면에 서브그리드는 중첩된 레이아웃을 관리하고 여러 중첩 수준에 걸쳐 콘텐츠를 정렬하는 데 가장 적합합니다. 서브그리드를 복잡한 레이아웃 시나리오를 단순화하는 CSS 그리드의 확장 기능으로 생각하십시오.

일반적인 문제 해결

결론

CSS 서브그리드는 CSS 그리드 툴킷에 추가된 귀중한 기능으로, 복잡한 중첩 레이아웃을 관리하고 시각적으로 매력적이며 유지보수 가능하고 반응형인 웹 디자인을 만드는 강력한 방법을 제공합니다. 기본 개념을 이해하고 실용적인 예제를 탐색함으로써, 이전에는 전통적인 CSS 기술로는 달성하기 어렵거나 불가능했던 정교한 레이아웃을 구축하기 위해 서브그리드를 활용할 수 있습니다. 서브그리드를 받아들이고 웹 개발 프로젝트에서 새로운 가능성을 열어보세요. 서브그리드를 사용하면 CSS 그리드의 힘을 중첩된 요소로 진정으로 확장하여 더 큰 제어력과 코드 유지보수성을 확보할 수 있습니다. 그것으로 실험하고 복잡한 CSS 레이아웃을 단순화하는 이점을 탐색해 보세요.

추가 자료

CSS 서브그리드: 중첩 레이아웃의 힘을 발휘하다 | MLOG