Как организовать <div>s в сетке?

Question

Я пытаюсь организовать 4 блока в 2 столбца и 2 строки, но они отображаются только в столбце и 4 строках. Я использую такие области шаблонов сетки ...

  .table-products {
    display: flex, grid;
  }
  .grid {
  grid-template-areas:
    "header1   header2"
    "body1   body2";
  }
  .table-products__header1 {
  grid-area: header1;
  background: yellow;
  }
.table-products__body1 {
  grid-area: body1;
  background: green;
  }
.table-products__header2 {
  grid-area: header2;
  background: blue;
  }
.table-products__body2 {
  grid-area: body2;
  background: red;
  }
.table-products__header1, .table-products__header2, .table-products__body1, .table-products__body2 {
  width: 40%;

<div class="table-products">
<div class="table-products__header1">
header1
</div>
<div class="table-products__body1">
body1
</div>
<div class="table-products__header2">
header2
</div>
<div class="table-products__body2">
body2
</div>
</div>

Я хотел бы, чтобы заголовки располагались рядом друг с другом, а тела - чуть ниже.

Не могли бы вы мне помочь? Спасибо !!

Answer 1

Просто установите display:grid на родительский элемент ...

  .table-products {
  display: grid;
  grid-template-areas: "header1   header2" "body1   body2";
}

.table-products__header1 {
  grid-area: header1;
  background: yellow;
}

.table-products__body1 {
  grid-area: body1;
  background: green;
}

.table-products__header2 {
  grid-area: header2;
  background: blue;
}

.table-products__body2 {
  grid-area: body2;
  background: red;
}

.table-products__header1,
.table-products__header2,
.table-products__body1,
.table-products__body2 {
  width: 40%;

<div class="table-products">
  <div class="table-products__header1">
    header1
  </div>
  <div class="table-products__body1">
    body1
  </div>
  <div class="table-products__header2">
    header2
  </div>
  <div class="table-products__body2">
    body2
  </div>
</div>