<button id="add">Add Box</button>

<div class="container"></div>
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.box {
  opacity: 1;
  transition: opacity 1s;
  width: 100px;
  height: 100px;
  background-color: red;
  @starting-style {
    opacity: 0;
  }
}
const button = document.querySelector("#add");
const container = document.querySelector(".container");

button.addEventListener("click", () => {
  const box = document.createElement("div");
  box.classList.add("box");
  container.appendChild(box);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.