CSS Grid를 사용할 때 Subgrid를 사용하면 쉽고 사고하기 어렵습니다.

이게 뭐야

CSS Grid를 사용할 때의 Tips입니다.

이벤트 「3000 문자 Tips - 알면 편리한 Tips를 모두에게 전달합시다」에의 투고 기사이기도합니다

리포지토리 및 GitHub Pages

이 기사를 작성하기 위해 작성한 코드는 공개됩니다.

GitHub Pages는 Subgrid의 대응 상황의 관계로 GitHub Pages에는 Firefox에서 액세스하십시오.

Subgrid를 사용하지 않으면

CSS Grid, 편리합니다.
하지만 display: grid 를 적용해도 바로 아래의 요소만 그리드 아이템으로 인식되지 않습니다.
물론 grid를 중첩하면 계층이 깊어져도 문제 표시상 문제는 없습니다만, 몇번이나 grid-template-columns 이나 grid-template-rows 를 쓰는 것이 됩니다.
아래 예제에서 파란색 영역은 div가 중첩되어 있으며 원래 그리드에 맞추기 위해 수동으로 grid-template-columns 또는 grid-template-rows를 다시 지정합니다.

<div class="grid">
  <h1 class="headline">Subgrid不使用</h1>
  <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 class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="non-subgrid">
    <div class="nested-grid-item">12</div>
    <div class="nested-grid-item">13</div>
    <div class="nested-grid-item">14</div>
    <div class="nested-grid-item">15</div>
  </div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
  <div class="grid-item">21</div>
  <div class="grid-item">22</div>
  <div class="grid-item">23</div>
  <div class="grid-item">24</div>
  <div class="grid-item">25</div>
</div>

`css
.grid {
background-color: #3d4040;
display: grid;
flex-grow: 1;
gap: 10px;
grid-template-columns: 1fr 2fr 3fr 4fr 5fr;
grid-template-rows: 1fr 2fr 3fr 4fr 5fr 6fr;
height: 100%;
padding: 20px;
}
.non-subgrid {
display: grid;
grid-column: 2/4;
grid-row: 4/6;
gap: 10px;
grid-template-columns: 2fr 3fr;
grid-template-rows: 4fr 5fr;
}
.headline {
align-self: center;
color: #fff;
font-size: 40px;
grid-column: 1/-1;
}
.grid-item {
background-color: #55c500;
}
.nested-grid-item {
background-color: #4097db;
}
`
만약 부모 요소인 .grid 의 폭이나 높이를 바꾸어도, 자식 요소인 .non-subgrid 가 그것을 검출하는 방법은 없습니다.
예를 들면 .grid 만을 다음과 같이 바꾸면, 표시는 이렇게 되어 버립니다.

  .grid {
    background-color: #3d4040;
    display: grid;
    flex-grow: 1;
    gap: 10px;
-   grid-template-columns: 1fr 2fr 3fr 4fr 5fr;
+   grid-template-columns: 3fr 3fr 2fr 2fr 1fr;
-   grid-template-rows: 1fr 2fr 3fr 4fr 5fr 6fr;
+   grid-template-rows: 1fr 3fr 2fr 2fr 1fr 1fr;
    height: 100%;
    padding: 20px;
  }

Subgrid를 사용하면

-  <div class="non-subgrid">
+  <div class="subgrid">
     <div class="nested-grid-item">12</div>
     <div class="nested-grid-item">13</div>
     <div class="nested-grid-item">14</div>
     <div class="nested-grid-item">15</div>
  </div>

css .subgrid { display: grid; grid-column: 2 / 4; grid-row: 4 / 6; grid-template-columns: subgrid; grid-template-rows: subgrid; }
초기 단계의 외형은 전혀 함께입니다만, subgrid를 지정하는 것으로 grid-template-columns 와 grid-template-rows 에 구체적인 값을 지정하지 않아도, 부모의 grid의 폭을 계승해 줍니다.
따라서 부모 요소의 gird 너비와 높이가 변경되면 자동으로 변경을 따릅니다.

주의

매우 유용한 Subgrid이지만 현재는 Firefox에서만 사용할 수 있습니다.