Как правильно разместить элементы на сетке, используя CSS?

Question

Я хотел бы сделать таблицу адаптивной для мобильных телефонов, поэтому я разделил исходную таблицу на 4 части, которые также являются таблицами, чтобы их можно было систематизировать по размеру устройства. Проблема в том, что каждому из них нужна вся ширина div (хотя поля вообще нет).

Я перепробовал все, что мог, но все еще не найдите ошибку. Ты хоть представляешь, что я могу попробовать? Спасибо !!

Это сокращенный пример кода CSS, который я использую:

@media (min-width: 641px) {
  .table-products {
    display: flex, grid;
  }
  .grid {
  grid-template-areas:
    'header1 body1';
  }
  .table-products__header1 {
  grid-area: header1;
  }
.table-products__body1 {
  grid-area: body1;
  }
.table-products__header1, .table-products__body1 {
  width: 40% !important;
  margin: 0 !important;
}
}