如果父元素跨越所有网格列，子元素是否可以工作到网格？

Question

我有一个简单的

grid

。某些元素（例如

<footer>

）跨越所有列。是否可以让页脚内的子元素适用于相同的底层网格？没有在父元素上设置完全相同的网格？

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

footer {
  grid-column: 1 / -1; /* this gets the footer to span all columns */
}

footer { /* can this be avoided? */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<main>
  <footer>
    <p>some text</p>
    <p>some more text</p>
  </footer>
</main>

Answer 1

subgrid

就是答案。

如果[在嵌套网格上]您在 grid-template-columns、grid-template-rows 或两者上设置值子网格，则嵌套网格将使用在父级上定义的轨道，而不是创建列出的新轨道。

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

footer {
  grid-column: 1 / -1;
  /* this gets the footer to span all columns */
  display: grid;
  grid-template-columns: subgrid;
}

p {
  outline: 1px solid green;
}

<main>
  <footer>
    <p>some text</p>
    <p>some more text</p>
  </footer>
</main>