左右に余白があって均等配置の横並びサムネリストを作る

左右のマージン10pxで、画像間のマージン5pxのサムネが並んだ枠を作成した。
演算がややこしくて忘れそうなのでメモ。

ulに左右10pxのマージン、liは5pxずつ隙間がある。
5個横並びを固定で、画像のサイズは画面幅に応じて可変とする。
imageの縦横比は3:4。
縦横比の異なる画像は、枠内に納める。

HTML

<div>
  <ul>
    <li>
      <a href="#">
        <img src="https://placehold.jp/150x150.png" alt="正方形">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://placehold.jp/300x500.png" alt="縦長">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://placehold.jp/500x150.png" alt="横長">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://placehold.jp/400x300.png" alt="4:3">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://placehold.jp/300x500.png" alt="縦長">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://placehold.jp/500x150.png" alt="横長">
      </a>
    </li>
  </ul>
</div>

css

// ここはリセット
ul, li {
  list-style: none;
  margin:0;
  padding:0;
}
// ここまでリセット


div {
  background: #3c3c3e;
}

ul {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 10px;
}

li{
      margin: 0 0 5px 5px;
    width: calc((100vw - 40px) / 5  );
    height: calc( ((100vw - 40px) / 5) * (3/4) );
    overflow: hidden;

    &:first-child,
    &:nth-child(6n)  {
        margin-left: 0;
    } 
}

a {
    position: relative;
    display: block;
    padding: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 100%;
}

img {
    display: block;
    width: calc((100vw - 40px) / 5 );
    height: calc( ((100vw - 40px) / 5) * (3/4) );
    object-fit: contain;
    aspect-ratio: 4/3;
}