父元素占满全部网格列时，子元素能否沿用同一底层grid布局？

完全可以不用给<footer>重复设置网格布局，用CSS的display: contents就能搞定。

为啥这个属性管用？ #

display: contents会让<footer>本身从布局结构里“隐身”，它的子元素（也就是那两个<p>标签）会直接成为<main>的直属子项，自然而然就沿用了<main>定义好的网格规则，省得再重复写一遍grid-template-columns。

修改后的代码 #

CSS

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

footer {
  grid-column: 1 / -1; /* 让footer占满所有网格列 */
  display: contents; /* 核心属性，让子元素继承父网格 */
}

HTML

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

小提醒 #

• 现代主流浏览器都支持这个属性，不用太担心兼容性；
• 用了display: contents后，<footer>本身的样式（比如背景色、边框）会失效，因为它不再参与布局。如果需要给footer区域加样式，可以把样式加到它的子元素上，或者在footer内部嵌套一个新容器来承载样式。

内容的提问来源于stack exchange，提问作者user2991837