Mouais enfin…

Grid c’est cool, mais quand on en vient à faire ça :

/* 2x1 partitions */

  .div3 .show:nth-child(3n+2),    /* div3 partition 02 of 03 */
  .div3 .show:nth-child(3n+3),    /* div3 partition 03 of 03 */
  .div5 .show:nth-child(15n+4),   /* div5 partition 04 of 15 */
  .div5 .show:nth-child(15n+5),   /* div5 partition 05 of 15 */
  .div5 .show:nth-child(15n+12),  /* div5 partition 12 of 15 */
  .div5 .show:nth-child(15n+15),  /* div5 partition 15 of 15 */
  .div6 .show:nth-child(12n+5),   /* div6 partition 05 of 12 */
  .div6 .show:nth-child(12n+6),   /* div6 partition 06 of 12 */
  .div6 .show:nth-child(12n+11),  /* div6 partition 11 of 12 */
  .div6 .show:nth-child(12n+12),  /* div6 partition 12 of 12 */
  .div7 .show:nth-child(14n+2),   /* div7 partition 02 of 14 */
  .div7 .show:nth-child(14n+3),   /* div7 partition 03 of 14 */
  .div8 .show:nth-child(16n+2),   /* div8 partition 02 of 16 */
  .div8 .show:nth-child(16n+5),   /* div8 partition 05 of 16 */
  .div8 .show:nth-child(16n+12),  /* div8 partition 12 of 16 */
  .div8 .show:nth-child(16n+13),  /* div8 partition 13 of 16 */
  .div9 .show:nth-child(9n+2),    /* div9 partition 02 of 09 */
  .div9 .show:nth-child(9n+5),    /* div9 partition 05 of 09 */
  .div9 .show:nth-child(9n+8),    /* div9 partition 08 of 09 */
  .div9 .show:nth-child(9n+9) {   /* div9 partition 09 of 09 */
    grid-column: auto / span 2;
  }

  .div3 .show:nth-child(3n+2) .headliner,
  .div3 .show:nth-child(3n+3) .headliner,
  .div5 .show:nth-child(15n+4) .headliner,
  .div5 .show:nth-child(15n+5) .headliner,
  .div5 .show:nth-child(15n+12) .headliner,
  .div5 .show:nth-child(15n+15) .headliner,
  .div6 .show:nth-child(12n+5) .headliner,
  .div6 .show:nth-child(12n+6) .headliner,
  .div6 .show:nth-child(12n+11) .headliner,
  .div6 .show:nth-child(12n+12) .headliner,
  .div7 .show:nth-child(14n+2) .headliner,
  .div7 .show:nth-child(14n+3) .headliner,
  .div8 .show:nth-child(16n+2) .headliner,
  .div8 .show:nth-child(16n+5) .headliner,
  .div8 .show:nth-child(16n+12) .headliner,
  .div8 .show:nth-child(16n+13) .headliner,
  .div9 .show:nth-child(9n+2) .headliner,
  .div9 .show:nth-child(9n+5) .headliner,
  .div9 .show:nth-child(9n+8) .headliner,
  .div9 .show:nth-child(9n+9) .headliner {
    font-variation-settings: "wdth" 900;
  }

… et donner une style spécifique à *chaque* div, autant ne pas utiliser grid et donner un height/width en pourcentage, ça reviendra au même.

L’idée d’un truc responsive, c’est pas seulement avoir un truc flexible, c’est aussi voir les éléments se réorganiser sur la page en fonction de la taille d’écran, et de façon optimale.

Grid et Flex sont très pratiques, c’est indéniable, mais y a beaucoup de masturbation de styles à leur sujet quand-même…

— (permalink)