Как отобразить контейнер внутри двух столбцов?

Question

Я хотел бы отображать содержимое этих двух columns только внутри container, а columns занимает всю ширину страницы, как показано ниже.

Возможно ли это с помощьюиспользуя css grid?

Спасибо за вашу помощь и поддержку.

<div class="columns">
  <div class="columns--container">
    <div class="column">
        <!-- Content -->
    </div>
    <div class="column">
        <!-- Content -->
    </div>
  </div>
</div>

Answer 1

Хорошо, я новичок в сетках, но это должно работать:

.columns {
  height: 400px;
  background: whitesmoke;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
}
.columns-container {
  grid-column-start: 2;
  grid-column-end: 4;
  display: inherit;
  grid-template-columns: auto auto;
  flex-direction: row;
}
.column {
  background: green;
}

<div class="columns">
  <div class="columns-container">
    <div class="column">
        <!-- Content -->
    </div>
    <div class="column">
        <!-- Content -->
    </div>
  </div>
</div>