如何在最大宽度容器内制作网格项目以跨越整个宽度？

Question

CSS 网格位于具有以下内容的页面上max-width：

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 400px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / -1;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 1 / -1;
  background-color: tomato;
}

@media (min-width: 576px) {
  .max-width {
    max-width: 500px;
  }
  .first-grid-item {
    grid-column: 1 / 9;
  }
  .second-grid-item {
    grid-column: 9 / 13;
  }
}

<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

在较小的屏幕上，布局会发生变化，第二个网格项位于第一个下方：

现在，出现了一个新要求，即为较小屏幕上的第二项添加全角背景颜色，如下所示：

你将如何实现这一目标？

---

注意事项：

• 网格可以出现在页面中间的某个地方，它不一定是页面上的唯一元素。例子：这里
• 网格项目可以具有事先未知的可变高度。例子：这里
• 当屏幕尺寸为：
  • 低于 400 像素 - 网格应占据全屏尺寸。
  • 介于 400 像素和 575 像素（含）之间 - 网格应该完全占据400px（这是max-width在较小的屏幕上）。
  • 至少 576px - 网格应该完全占据500px（这是max-width在较大的屏幕上）。
• 如果您认为有更自然的方式来实现这一点，则可以更改 HTML。只要确保元素不会从它们需要的位置移动。

Answer 1

在小屏幕上，您实际上并不需要网格。

这是我的尝试：

body {
  outline: 1px solid black;
}

.first-grid-item{
  max-width: 400px; /* Only restrict the first item */
  margin: 0 auto;
}

.first-grid-item {
  background-color: #ccc;
}

.second-grid-item {
  background-color: tomato;
  padding:0 calc(50% - 200px); /* to have the content inside the 400px (remove this if not)*/
}

@media (min-width: 576px) {
  .max-width {
    max-width: 500px;
    margin: 0 auto;
  }
  /* only here we need the grid */
  .grid {
    display: grid; 
    grid-template-columns: repeat(12, 1fr);
  }
  /**/
  .first-grid-item {
    grid-column: 1 / 9;
    margin:0; /* reset margin */
    max-width: 100%; /* reset max-width */
  }
  .second-grid-item {
    grid-column: 9 / 13;
    background-color: lightblue;
    padding:0; /* reset padding */
  }
}

<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

您也可以像下面这样做：

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 500px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / 9;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 9 / 13;
  background-color: lightblue;
}

@media (max-width: 576px) {
  .max-width {
    max-width: 100%;
  }
  .grid {
    display: block;
  }
  .first-grid-item {
    max-width: 400px;
    margin: 0 auto;
  }
  .second-grid-item {
    background-color: tomato;
    padding: 0 calc(50% - 200px);
  }
}

<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

想要有不同的色彩，多重背景就可以轻松做到

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 500px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / 9;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 9 / 13;
  background: 
    linear-gradient(lightblue,lightblue) content-box,
    tomato;
}

@media (max-width: 576px) {
  .max-width {
    max-width: 100%;
  }
  .grid {
    display: block;
  }
  .first-grid-item {
    max-width: 400px;
    margin: 0 auto;
  }
  .second-grid-item {
    padding: 0 calc(50% - 200px);
  }
}

<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>