grid-cards.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <link rel="stylesheet" href="style.css">
  <style>
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
      gap: 2rem;
      rule: 1px solid #c00;
      rule-visibility-items: var(--visibility, normal);
    }

    .cards .card {
      padding: 1rem;
      background: #eee;
      border-radius: 4px;
      text-align: center;
    }
  </style>
</head>
<body class="needs-gap-decorations">
  <div class="controls">
    <p>
      <label><input type="radio" name="visibility" value="normal" checked> normal（初期値。gridではallと同じ）</label>
      <label><input type="radio" name="visibility" value="around"> around</label>
      <label><input type="radio" name="visibility" value="between"> between</label>
    </p>
    <p>
      アイテム数:
      <button type="button" id="remove">-</button>
      <output id="count">7</output>
      <button type="button" id="add">+</button>
    </p>
    <p class="note">最終行に空きがある状態で見比べてください。</p>
  </div>

  <div class="cards" id="cards"></div>

  <script>
    const cards = document.getElementById("cards");
    const count = document.getElementById("count");
    let total = 7;

    const render = () => {
      cards.replaceChildren(
        ...Array.from({ length: total }, (_, i) => {
          const div = document.createElement("div");
          div.className = "card";
          div.textContent = String(i + 1);
          return div;
        })
      );
      count.textContent = String(total);
    };

    document.getElementById("add").addEventListener("click", () => {
      total = Math.min(total + 1, 16);
      render();
    });

    document.getElementById("remove").addEventListener("click", () => {
      total = Math.max(total - 1, 1);
      render();
    });

    const applyVisibility = () => {
      const checked = document.querySelector('input[name="visibility"]:checked');
      cards.style.setProperty("--visibility", checked.value);
    };

    document.querySelectorAll('input[name="visibility"]').forEach((input) => {
      input.addEventListener("change", applyVisibility);
    });

    applyVisibility();
    render();
  </script>
</body>
</html>