您可以使用指定的flexbox来执行类似的操作。这里的技巧是使用flex-wrap，这样方块就不会溢出容器。请记住根据您的需要调整portfolio__body的max-width。希望这能帮上忙。

.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>

.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>