Как сделать такой бокс (как в примере) с GRID или Flexbox?

Question

[Danny13]

Я увидел вот такой вот пример, очень классно, что этот box в примере имеет одинаковую высоту и ширину. Я правда попытался сделать такой бокс с flexbox или с grid, чтобы можно было для мобильного view потом разбить на колонки, но ничего не вышло.

https://codepen.io/alexlcs/pen/ZbmzPE

<div class="grid-container">
  <div class="grid-item"><div>
  <div class="grid-item"><div>
  <div class="grid-item"><div>
  <div class="grid-item"><div>
</div>

Может быть кто-нибудь подскажет как сделать такой box с 4 одинаковыми колонками, как в codepen примере с grid или flexbox?

Спасибо

Answer 1

[Роман]

Box-ы, поместить в контейнер-обертку, с нужными стилями.

Для Flex:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.box { 
  flex-grow: 1;
  width: 50%;
  padding: 10px;
  overflow: auto;
}

Для Grid:

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.box {
  padding: 10px;
  overflow: auto;
}

Answer 2

[Фин Дел]

grid
flex