css grid - galerie en tuile

section {
  display: grid;
  /* taille des colonnes - explicite */
  grid-template-columns: repeat(16, minmax(0, 1fr));
  /* taille des lignes - implicite */
  grid-auto-rows: calc(100vh / 10);
  /* inutile puisque explicite avec grid-templates-columns */
  /* grid-auto-columns: calc(100vw / 16); */
  /* controle de l'algo de placement */
  grid-auto-flow: dense;
  /* marge et espace */
  grid-gap: 0.5rem;
  margin: 0.5rem;
}
article {
  /* background-color: lime; */
  /* min-height: calc(100vh / 10); */
  /* background-image attribué par script */
  background-size: cover;
  background-position: center;
}

const images = [
  "david_william_Baum_0.jpg",
  "david_william_Baum_1.jpg",
  "david_william_Baum_2.jpg",
  "david_william_Baum_3.jpg",
  "david_william_Baum_4.jpg",
  "david_william_Baum_5.jpg",
  "david_william_Baum_6.jpg",
  "david_william_Baum_7.jpg",
  "david_william_Baum_8.jpg",
  "david_william_Baum_9.jpg",
  "david_william_Baum_10.jpg",
  "david_william_Baum_11.jpg",
  "david_william_Baum_12.jpg",
  "david_william_Baum_13.jpg",
  "david_william_Baum_14.jpg",
  "david_william_Baum_15.jpg",
  "david_william_Baum_16.jpg",
  "david_william_Baum_17.jpg",
  "david_william_Baum_18.jpg",
  "david_william_Baum_19.jpg",
  "david_william_Baum_20.jpg",
];
const section = document.querySelector("section");
// const chiffres = [2, 4, 6];
// itère sur la liste d'images
images.forEach((image, index) => {
  const arti = document.createElement("article");
  arti.innerHTML = index;
  arti.style.backgroundImage = "url(dwb/" + images[index] + ")";
  // la ligne suivante est équivalente avec une syntaxe es6 (+ contemporaine)
  // arti.style.backgroundImage = `url(dwb/${images[index]})`;

  // le code suivant attribue aléatoirement des tailles aux articles dans la grille
  /* 
    const chiffre = Math.floor(Math.random() * chiffres.length);
  arti.style.gridColumn = "span " + chiffres[chiffre];
  arti.style.gridRow = "span " + chiffres[chiffre];
    */
  section.appendChild(arti);
});