CSS 网格尺寸答案

【问题标题】：CSS grid dimensionsCSS 网格尺寸
【发布时间】：2020-08-19 16:47:51
【问题描述】：

我想知道是否有办法限制网格的尺寸（不是应用它的元素，而是网格本身）。我解释一下：

假设我们有一个带有深色背景的页脚，横跨页面的所有宽度。此页脚包含 2 个子块，类名 .footer__1 和 .footer__2，我们希望它们占据 2/3 和 1/3 的可用宽度，并带有 2rem 间距。

有没有办法给包含两个子块的网格一个 60rem 的 grid-max-width（是的，我编的），而不改变块的宽度（记住，它的背景必须是完整的宽度），不使用包装？因此，占用的宽度（.footer__1 + gap + .footer__2）应该是 60rem max，水平居中。

<footer>
  <div class="footer__1">foo</div>
  <div class="footer__2">whatever</div>
</footer>

.footer {
  display: grid;
  grid-template_columns: 2fr 1fr;
  grid-column-gap: 2rem;
  /* grid-max-width: 60rem */
}

谢谢

【问题讨论】：

标签： css css-grid

【解决方案1】：

你必须用一个额外的元素包裹它，并限制额外元素的宽度。

footer {
  background-image: linear-gradient(20deg, red, pink);
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 2rem;
  
  /* just for demo purpose */
  max-width: 300px;
  margin: 0 auto;
  min-height: 150px;
  background: white;
  
}

<footer>
  <div class="container">
    <div class="footer__1">foo</div>
    <div class="footer__2">whatever</div>
  </div>
</footer>

【讨论】：

【解决方案2】：

没有另一个容器，我认为是不可能的。

但是，您可以通过制作页脚width: 60rem 来模仿它，并将背景设置为伪元素并展开它。

footer {
  position: relative;
  z-index: 1;
  width: 60rem;
  margin: 0 auto;
}

footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 9999px;
  height: 100%;
  background: green;
}

<footer>
  <div class="footer__1">foo</div>
  <div class="footer__2">whatever</div>
</footer>

我认为最好的方法是添加 div.footer__inner 来保存两个 div - .footer__1 和 .footer__2。

【讨论】：