Le Hollandais Volant

Oh et j’ai changé (légèrement) le thème de mon site.

J’utilise une jolie astuce CSS qui permet de faire deux colonnes de blocs de taille variable, avec en prime la possibilité de garder l’ordre des articles (sur Firefox en tout cas).

Normalement, quand on utilise des colonnes, les éléments HTML sont placés dans la première colonne puis dans la seconde. C’est le comportement que vous avez sous Chrome (ou Vivaldi, Opera…).

Firefox permet un petit truc en plus : si on regarde les articles par ordre chronologique, ils sigzaguent !
Vous me direz que c’est simple et qu’il suffit des inline-block… sauf que les inline-block ne permet pas de garder prendre des blocs de taille variable et d’avoir un beau rendu façon « journal ».

Je trouve ça tellement chouette que je vais mettre ça ailleurs aussi.

Je n’utilise pas de float non plus (qui aurait rendu compliqué un design fluide et responsive). Bien-sûr, tout est 100% CSS !

Si vous voyez des bugs sur un navigateur récent, merci de me le signaler :-)

ÉDIT : après quelques remarques :
– j’ai rajouté le nuage de tags. Je ne pensais pas que quelqu’un les utilisais encore…
– j’ai remis les blocs dans l’ordre sur un affichage mobile (un oubli de ma part).
– le layout en double colonne est joli, mais n’est pas pratique sous Chrome, à cause de l’ordre des éléments. Je ne peux pas faire comme dans Firefox à cause d’un bug dans Blink (il est marqué comme résolu mais ça ne l’est pas pour le mode "Column" de flexbox, et ça ne sera jamais corrigé malheureusement : il est en wontfix).
Du coup, soit je passe par un brin de JS pour forcer les deux colonnes (c’est juste un "height" à fixer), soit je repasse en mode colonne unique.