CSS 서브 그리드

CSS 그리드는 매우 강력한 레이아웃 엔진이지만 행과 코드가 상위 그리드에 생성된 열 트랙은 직접 배치에만 사용할 수 있습니다. 그리드 컨테이너의 하위 요소로 구성됩니다. 모든 작성자가 정의한 명명된 그리드 영역과 원이 아닌 다른 요소에서는 사라졌습니다. 직계 하위에 추가합니다. subgrid를 사용하면 트랙 크기 조정, 템플릿, 이름을 공유할 수 있습니다. 할 수 있습니다. 이 도움말에서는 작동 방식을 설명합니다.

하위 그리드 이전에는 이 것입니다.

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

서브 그리드 기본사항

다음은 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 */
}

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

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

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

디자이너는 공유 그리드를 사용하여 전체 디자인에 선을 그리고 원하는 요소를 정렬할 수 있습니다. 이제 웹 개발자도 할 수 있습니다. 정확히 더 많은 기능을 제공할 수 있습니다.

가장 일반적인 디자이너 그리드 워크플로를 구현하면 subgrid의 기능, 워크플로, 잠재력에 대한 유용한 정보

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

다음 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];
}

몇 가지 추가 스타일을 사용하면 다음과 같은 디자인을 만들 수 있습니다.

이 상위 요소 내부에는 다양한 중첩된 요소가 있습니다. 디자인에는 탐색 및 헤더 행 아래에 전체 너비 이미지가 필요합니다. 가장 먼 왼쪽과 오른쪽 열 행 이름은 fullbleed-start 및 fullbleed-end입니다. 이 방법으로 그리드 선 이름 지정 하위 요소를 게재위치에 맞게 동시에 각 요소에 정렬할 수 있습니다. 약식 /fullbleed 곧 알게 되겠지만 매우 편리합니다.

이름이 지정된 행과 열로 생성된 전반적인 기기 레이아웃을 사용하여 subgrid를 사용하여 이름이 지정된 행과 열을 중첩된 그리드 레이아웃에 전달합니다. 이 subgrid 마법 같은 순간입니다. 기기 레이아웃은 이름이 지정된 행을 전달하고 열을 앱 컨테이너로 전달하면 해당 컨테이너는 있습니다.

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

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

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

모두 정의되었으므로 이제 중첩된 이미지가 subgrid 덕분에 더욱 향상되었습니다. 음수 값이나 트릭이 없으며 대신 '내 레이아웃은 fullbleed-start에서 fullbleed-end까지 확장됩니다'라는 멋진 한 줄짜리 코드가 있습니다.

.app > main img {
    grid-area: fullbleed;
}

<ph type="x-smartling-placeholder"></ph>

이제 디자이너가 사용하는 것과 같은 매크로 그리드가 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년 이상 사용해 왔습니다.

하위 그리드 배지는 그리드 배지처럼 작동하지만 어떤 그리드가 하위 그리드이고 어떤 그리드가 하위 그리드가 아닌지 시각적으로 구분합니다.

리소스

이 목록은 하위 그리드 도움말, 데모, 시작에 관한 전반적인 아이디어를 모아 놓은 것입니다. 하위 그리드의 다음 단계를 찾고 있는 경우 유익한 정보를 얻으시길 바랍니다.

• MDN
• 자막이 정렬된 레이첼 앤드류
• 10가지 훌륭한 사례를 들어보는 레이첼 앤드류
• 예시 사이트를 통해 레이첼 앤드류
• Ahmad Shadeed 기사
• 2022 CSS 데이의 미셸 바커
• 카드
  • Jhey의 Codepen
  • Ahmad Shadeed의 Codepen
  • 코데펜, 카노 타케시
  • Arvid의 Codepen
  • 크리스 코이어의 Codepen
  • 미리암 수잔님의 Codepen
• 양식을 작성하는 크리스 코이어
• 양식 정렬의 파쿤도 코라디니
• 목록 항목 마커를 정렬하는 크리스 코이어
• 상위 그리드에 맞추기 위해 컨테이너에서 튀어나온 미셸 바커
• 이름이 지정된 행 이름과 서브 그리드 상호작용을 보여주는 미리암 수잔
• 이름이 지정된 영역에 대한 기본사항을 설명하는 케빈 파월
• 정렬된 목록을 갖춘 케빈 파월
• 목록이 정렬된 섀넌 묄러
• 구성요소로 전달되는 페이지 수준 그리드를 보여주는 케빈 파월
• Devtool 오버레이 및 대체가 포함된 Elad Shechter
• 아론 아이커(Aaron Iker)는 서브그리드를 활자로 사용하여 문장의 기준선을 각주
• 기사 내부에 풀 블리드 이미지가 있는 아담 아가일