<div class="wrapper">
  ウィンドウの横幅を変えてみてください。常に4列、正方形を維持します。ガターも常に均一です。
  <ul class="list">
    <li class="list_item">
      <span class="text">A</span>
    </li>
    <li class="list_item">
      <span class="text">B</span>
    </li>
    <li class="list_item">
      <span class="text">C</span>
    </li>
    <li class="list_item">
      <span class="text">D</span>
    </li>
    <li class="list_item">
      <span class="text">E</span>
    </li>
    <li class="list_item">
      <span class="text">F</span>
    </li>
    <li class="list_item">
      <span class="text">G</span>
    </li>
    <li class="list_item">
      <span class="text">H</span>
    </li>
    <li class="list_item">
      <span class="text">I</span>
    </li>
    <li class="list_item">
      <span class="text">J</span>
    </li>
  </ul>
</div>
.wrapper {
  width: 90%;
  margin: auto;
}

.list {
  display: flex;
  flex-wrap: wrap;
  
  &_item {
    position: relative;
    width: calc(100 / 430 * 100%);
    $gutter: calc(10 / 430 * 100%);
    margin: $gutter $gutter 0 0;
    background-color: #ccc;
    
    &:nth-child(4n) {
      margin-right: 0;
    }
    
    &::before {
      display: block;
      content: '';
      padding-top: 100%;
    }
    
    & > .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.