<div class="wrapper">
  ウィンドウの横幅を変えてみてください。常に４列、正方形を維持します。ガターも常に均一です。<br><br>
  <ul class="list">
    <li class="list_item">A</li>
    <li class="list_item">B</li>
    <li class="list_item">C</li>
    <li class="list_item">D</li>
    <li class="list_item">E</li>
    <li class="list_item">F</li>
    <li class="list_item">G</li>
    <li class="list_item">H</li>
    <li class="list_item">I</li>
    <li class="list_item">J</li>
  </ul>
</div>
* {
  box-sizing: border-box;
}

.wrapper {
  width: 90%;
  margin: auto;
}

.list {
  $gutter: calc(10 / 430 * 100%);
  display: flex;
  flex-wrap: wrap;
  gap: $gutter;
  
  &_item {
    background-color: #eaeef5;
    border: 1px solid #ccc;
    aspect-ratio: 1 / 1;
    width: calc(100 / 430 * 100%);
    margin-bottom: $gutter;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.