CSS 서브 그리드

CSS 그리드는 매우 강력한 레이아웃 엔진이지만, 상위 그리드에서 생성된 행 및 열 트랙은 그리드 컨테이너의 직접 하위 요소를 배치하는 데만 사용할 수 있습니다. 작성자가 정의한 이름이 지정된 그리드 영역 및 선은 직접 하위 요소가 아닌 다른 요소에서 손실되었습니다. subgrid를 사용하면 트랙 크기 조정, 템플릿 및 이름을 중첩된 그리드와 공유할 수 있습니다. 이 도움말에서는 작동 방식을 설명합니다.

하위 그리드 전에는 이와 같은 정리되지 않은 레이아웃을 피하기 위해 콘텐츠를 직접 맞춤 제작하는 경우가 많았습니다.

세 개의 카드가 나란히 표시되며, 각 카드에는 헤더, 단락, 링크라는 3개의 콘텐츠가 포함되어 있습니다. 각 확장 소재는 텍스트 길이가 다르므로 카드를 나란히 놓을 때 카드가 어색하게 정렬되기 때문입니다.

서브 그리드 이후에는 다양한 크기의 콘텐츠를 정렬할 수 있습니다.

세 개의 카드가 나란히 표시되며, 각 카드에는 헤더, 단락, 링크라는 3개의 콘텐츠가 포함되어 있습니다. 텍스트 길이는 각각 다르지만 하위 그리드는 각 콘텐츠 항목 중 가장 높은 항목이 행 높이를 설정하도록 허용하여 정렬 문제를 수정하여 정렬을 수정했습니다.

브라우저 지원

  • Chrome: 117
  • Edge: 117.
  • Firefox: 71
  • Safari: 16.

소스

하위 그리드 기본사항

다음은 CSS subgrid의 기본사항을 소개하는 간단한 사용 사례입니다. 그리드는 이름이 지정된 두 열로 정의되며, 첫 번째 열은 너비가 20ch이고 두 번째 열은 공간 1fr의 '나머지'입니다. 열 이름은 필수사항은 아니지만 설명 및 교육 목적으로 사용하기에 좋습니다.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

그런 다음 이 그리드의 하위 요소가 이 두 열에 걸쳐 있고, 그리드 컨테이너로 설정되고, grid-template-columns를 subgrid로 설정하여 상위 요소의 열을 채택합니다.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
열 줄 시작 부분에 이름이 있고 두 개의 열이 나란히 표시된 CSS 그리드 DevTools의 스크린샷
https://codepen.io/web-dot-dev/pen/NWezjXv

이제 상위 그리드의 열이 한 층 아래 서브그리드로 효과적으로 전달되었습니다. 이제 이 하위 그리드에서 두 열 중 하나에 하위 요소를 할당할 수 있습니다.

도전과제! 동일한 데모를 grid-template-rows에 대해 반복합니다.

페이지 수준 '매크로' 그리드 공유

디자이너는 공유 그리드를 사용하여 전체 디자인에 선을 그리고 원하는 요소를 정렬하는 경우가 많습니다. 이제 웹 개발자도 할 수 있습니다. 이제 이 워크플로 외에도 더 많은 작업을 할 수 있습니다.

매크로 그리드에서 완성된 디자인까지. 그리드 이름이 지정된 영역은 먼저 생성되고 나중에 구성요소가 원하는 대로 배치됩니다.

가장 일반적인 디자이너 그리드 워크플로를 구현하면 subgrid의 기능, 워크플로 및 잠재력에 관한 유용한 정보를 제공할 수 있습니다.

다음은 모바일 페이지 레이아웃 매크로 그리드의 Chrome DevTools에서 가져온 스크린샷입니다. 선에는 이름이 있고 구성요소 배치를 위한 명확한 영역이 있습니다.

Chrome CSS 그리드 DevTools의 스크린샷으로, 행과 열에 빠른 식별을 위해 이름이 지정된 모바일 크기의 그리드 레이아웃(fullbleed, system-status, primary-nav, primary-header, main, footer, system-gestures)을 보여줍니다.

다음 CSS는 기기 레이아웃의 이름이 지정된 행과 열이 있는 이 그리드를 만듭니다. 각 행과 열에는 크기가 있습니다.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

일부 추가 스타일은 다음과 같은 디자인을 제공합니다.

이전과 동일한 CSS DevTools 그리드 오버레이이지만 이번에는 일부 모바일 시스템 UI, 그림자, 약간의 색상이 있습니다. 디자인의 방향을 확인하는 데 도움이 됩니다.

이 상위 요소 내에는 다양한 중첩 요소가 있습니다. 디자인에는 탐색 및 헤더 행 아래에 전체 너비 이미지가 필요합니다. 가장 왼쪽과 오른쪽 열 선 이름은 fullbleed-start 및 fullbleed-end입니다. 이렇게 그리드 라인에 이름을 지정하면 하위 요소가 fullbleed의 위치 바로가기를 사용하여 동시에 정렬할 수 있습니다. 곧 알게 되겠지만 매우 편리합니다.

DevTools의 그리드 오버레이를 확대한 스크린샷으로, 특히 풀 블리드 시작 및 풀 블리드 열 이름에 중점을 둡니다.

이름이 지정된 행과 열로 만든 전반적인 기기 레이아웃을 사용하여 subgrid를 사용하여 이름이 지정된 행과 열을 중첩된 그리드 레이아웃에 전달합니다. 바로 subgrid의 마법 같은 순간입니다. 기기 레이아웃은 이름이 지정된 행과 열을 앱 컨테이너에 전달하고 앱 컨테이너는 이를 모든 하위 요소에 전달합니다.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

CSS 하위 그리드는 그리드 트랙 목록 대신 사용되는 값입니다. 요소가 상위 요소에서 확장하는 행과 열이 이제 요소가 제공하는 행과 열과 동일합니다. 이렇게 하면 .app뿐만 아니라 .app의 하위 요소에서도 .device 그리드의 행 이름을 사용할 수 있습니다. .app 내부의 요소는 서브그리드 전에 .device에서 만든 그리드 트랙을 참조할 수 없습니다.

이렇게 정의하면 이제 중첩된 이미지가 subgrid 덕분에 레이아웃에서 전체 블리드로 설정될 수 있습니다. 음수 값이나 트릭은 없습니다. 대신 '내 레이아웃은 fullbleed-start에서 fullbleed-end까지 스팬됩니다.'라는 멋진 한 줄문이 표시됩니다.

.app > main img {
    grid-area: fullbleed;
}
기본 탐색 및 헤더 행 아래에 제대로 배치되고 각 풀 블리드 열 행으로 확장되는 전체 너비의 중첩 이미지가 포함된 완성된 매크로 레이아웃입니다.
https://codepen.io/web-dot-dev/pen/WNLyjzX

이제 디자이너가 사용하는 것과 같은 매크로 그리드가 CSS로 구현됩니다. 이 개념은 필요에 따라 확장 및 확장될 수 있습니다.

지원 여부 확인

CSS와 서브그리드를 사용한 점진적 개선은 익숙하고 간단합니다. @supports를 사용하고 괄호 안에서 브라우저에 하위 그리드를 템플릿 열 또는 행의 값으로 이해하는지 묻습니다. 다음 예에서는 grid-template-columns 속성이 subgrid 키워드를 지원하는지 확인합니다. 이 경우 하위 그리드를 사용할 수 있습니다.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

DevTools

Chrome, Edge, Firefox, Safari에는 모두 뛰어난 CSS 그리드 DevTools가 있으며 Chrome, Edge, Firefox에는 서브 그리드 지원을 위한 특정 도구가 있습니다. Chrome은 115년에 도구를 발표했지만 Firefox에는 1년 이상 사용되었습니다.

Elements 패널의 요소에 있는 서브그리드 배지의 스크린샷 미리보기

서브 그리드 배지는 그리드 배지처럼 작동하지만 어떤 그리드가 서브그리드인지 시각적으로 구별합니다.

리소스

이 목록에는 서브그리드 문서, 데모 및 시작하는 데 도움이 되는 전반적인 아이디어가 포함되어 있습니다. 하위 그리드 교육을 위한 다음 단계를 찾고 있다면 이 모든 훌륭한 리소스를 즐겁게 살펴보세요.