Сubes for photo.HTML CSS

Question

<div class="portfolio__body">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

I've tried to do it with flex but it didn't work. I want the cubes to be like in the picture

---

Answer 1

You can do something like this, using flexbox as specified. The trick here is to use flex-wrap so the squares do not overflow your container. Have in mind to adjust the max-width of portfolio__body according to your need. Hope this helps.

.portfolio__body {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
  align-items: center;
}

.square {
  width: 100px;
  height: 100px;
  background: red;
  margin: 5px;
}

<div class="portfolio__body">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Answer 2

.portfolio__body {
     padding: 0;
     margin: 0;
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
}
 .square {
     background: #f00;
     flex: 1 1 calc((100% / 2) - 2rem);
     color: #fff f;
}
 .square::before {
     content: '';
     float: left;
     padding-top: 56%;
}
 

<ul class="portfolio__body">
  <li class="square">1</li>
  <li class="square">2</li>
  <li class="square">3</li>
  <li class="square">4</li>
  <li class="square">5</li>
  <li class="square">6</li>
</ul>