css - 在 CSS 网格中如何将子元素扩展到父容器之外

Question

我有一个 CSS 网格，比如 3 列，父容器位于中间列，我可以以某种方式扩展子容器以获取所有三列吗？在下面的代码中，我希望图像区域占用所有三列，而文本仅占用一列：

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: 10% 1fr 10%;
}

.content {
  grid-column: 2/3;
}

.image-area {
  grid-column: 1/4;
  color: #6dae72;
}

<div class="grid">
  <div class="content">
    <div class="text-area">Some text</div>
    <div class="image-area">The picture</div>
  </div>
</div>

将不胜感激任何帮助。

标签： csscss-grid