[HTML, CSS]wrapした要素を3 1ではなく2 2で並べる4つの方法(flex or grid?)

display: flex とflex-wrap: wrapを使って単純に要素を複数行に並べようとすると、要素が偶数個なのにのときに1つ余ってしまう事がある

↓これを

↓このように余らせないで

↓きちっと正方形に収めたい

元の状態

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 200px;

      /* ここから下はデザイン用 */
      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>

display: flexとitemに50%を指定する方法

子要素(item)のサイズが変わっても大丈夫な場合に有効

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 200px;

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: calc(50% - 10px); /* 変更Point */
      background-color: #cc334d;
    }
  </style>

display: gridを使う方法 1

隙間が変わっても大丈夫な場合に有効

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: grid; /* 変更Point */
      grid-template-columns: auto auto; /* 変更Point */
      place-items: center; /* 変更Point */
      width: 200px;

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>

display: gridを使う方法 2

親のサイズが変わっても大丈夫な場合に有効

  <div class="wrapper">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>
  <style>
    .wrapper {
      display: grid; /* 変更Point */
      grid-template-columns: auto auto; /* 変更Point */
      width: fit-content; /* 変更Point */

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>

HTMLに行ごとのdivを追加する方法

HTMLを書き換えることに躊躇がない場合に有効

  <div class="wrapper">
    <!-- 変更Point -->
    <div class="line">
      <span class="item">1</span>
      <span class="item">2</span>
    </div>
    <!-- 変更Point -->
    <div class="line">
      <span class="item">3</span>
      <span class="item">4</span>
    </div>
  </div>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 200px;

      gap: 10px;
      background-color: #abd8ee;
      padding: 10px;
    }
    /* 変更Point */
    .line {
      display: flex;
      gap: 10px;
    }
    .item {
      height: 50px;
      width: 50px;
      background-color: #cc334d;
    }
  </style>