230227 - exo grille et motif

cssgrid - design matriciel

grille de 9 x 16

body {
    display: grid;
    grid-template-columns: repeat(9, minmax(0,1fr));
    grid-auto-rows: calc(calc(100vh / 16) - 3px);
    grid-gap: 3px;
}

On crée à la volée les articles, on leur attribue une couleur de la liste et on les place dans le DOM

const liste = ["#111","#222"];
for (let i=0; i<9*16; i++) {
    const article = document.createElement(”article”);
    article.style.backgroundColor = liste[i%liste.length];
    document.body.appendChild(article);
}

Ensuite on joue et on explore les possibles graphiques.

4 couleurs

On fait varier:

Le nombre de couleurs dans la liste
La dimension de la grille (avec des variables css! Le ratio de la page est arbitrairement 16:9)

:root {
    --x : 9;
    --y : calc(calc( var(--x) / 9) * 16);
}
body {
    display: grid;
    grid-template-columns: repeat(var(--x), minmax(0,1fr));
    grid-auto-rows: calc(calc(100vh / var(--y)) - 3px);
    grid-gap: 3px;
}

Au hasard dans la liste ( des couleurs -> génère du bruit)


// tire au hasard une couleur dans liste et la donne au bloc
article.style.backgroundColor = liste[Math.floor(Math.random()*liste.length)];

On remplace la couleur par un svg

nPictos = 8;
…
// Place dans chaque bloc, un symbole svg nommé (pic_0.svg puis pic_1.svg… jusque nPictos-1)
article.style.background = `url(_medias/pictos/pic_${i%nPictos}.svg) 100% no-repeat / cover`;

Ici une version avec taille de la grille définie dans la css

<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style media="screen">
      * { margin:0; padding: 0; }
      :root {
        /* interstice entre les carrés */
        --gap : 0px;
        /* nombre de carrés ssur la largeur */
        --module: 23;
      }
      body {
        background-color: #333;
        display: grid;
        grid-template-columns: repeat(var(--module), minmax(0,1fr));
        grid-auto-rows: calc(calc(100vw / var(--module)) - var(--gap));
        grid-gap: var(--gap);
      }
    </style>
  </head>
  <body>
  <aside>commentaire</aside>
    <script>
      const liste = ["#000","#888","#ccc","#000","#f80"];
      const blocs = [];
      // récupère la variable css `module`
      const x = getComputedStyle(document.documentElement).getPropertyValue('--module');
      // calcule le nbr de carrés en hauteur
      const y = Math.ceil(window.innerHeight / (window.innerWidth/x));
      for (let i=0; i<x * y; i++) {
        const article = document.createElement("article");
        blocs.push(article);
        article.style.backgroundColor = liste[i%liste.length];
        document.body.appendChild(article);
      }
    </script>
  </body>
</html>

4 couleurs