在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>

不胜感激。