How to make such a box (as in the example) with GRID or Flexbox?

Question

Flexbox

I saw an example like this, it's very cool that this box in the example has the same height and width. I really tried to make such a box with flexbox or with grid, so that I could then break it into columns for the mobile view, but nothing came of it.

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>

Can someone tell me how to make such a box with 4 identical columns, as in the codepen example with grid or flexbox?

Thanks

Answer 1

Boxes, put in a wrapper container, with the necessary styles.
For Flex:

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

For Grid:

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