В сетке 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>

Буду признателен за любую помощь.