Ce n'est pas rhétorique : je suis vraiment intéressé à trouver de bons cas d'utilisation pour les mises en page multi-colonnes CSS.
La réponse semble simple. Utilisez des colonnes lorsque vous souhaitez diviser n'importe quel contenu en colonnes, n'est-ce pas ? Voici généralement le genre d'exemple que vous trouverez dans les articles qui montrent comment fonctionnent les mises en page multi-colonnes CSS, y compris la nôtre Almanach:
Droit sur. Mais est-ce vraiment un cas d'utilisation ? Mmmm peut-être. Si le texte est relativement bref, c'est peut-être une bonne idée. C'est comme ça que je me l'ai vendu lors de la refonte de mon site web il y a quelques années. Ce n'est pas comme ça aujourd'hui, mais voici à quoi cela ressemblait alors:
Mais un article complet divisé en colonnes ? J'adore ça dans les journaux, mais j'hésite à faire défiler une page Web pour lire une colonne, seulement à revenir en arrière pour recommencer.
Je suppose que nous pouvons l'utiliser pour placer deux éléments côte à côte, mais flexbox est bien plus adapté à cela. De plus, une limitation nous empêche de sélectionner les colonnes pour les dimensionner individuellement. Les colonnes doivent avoir la même largeur.
Une chose que les colonnes ont pour elles est qu'elles sont la seule méthode de mise en page CSS qui débris contenu. (C'est-à-dire, à moins que nous ne comptions Régions CSS… qu'est-il arrivé à ceux-là, de toute façon ?!) Donc, si vous voulez diviser un paragraphe en colonnes, c'est déjà possible sans emballages supplémentaires.
À quel autre moment pourriez-vous avoir besoin de diviser un bloc de contenu continu en colonnes ? Je me souviens avoir eu besoin de le faire quand j'avais une longue liste d'articles non ordonnés. J'aime la façon dont les listes peuvent rendre le contenu facile à analyser, mais de longues listes peuvent rendre un côté de la page super lourd. Disons, par exemple, que nous répertorions toutes les balises de publication pour CSS-Tricks dans des groupes alphabétiques. Une mise en page multi-colonnes fonctionne à merveille pour cela :
Allez-y et essayez de redimensionner la largeur de la fenêtre. Trois colonnes sont définies mais le nombre changera en fonction de la quantité d'espace disponible. Je dois aimer toute cette bonté réactive sans le travail de requête des médias !
Je travaillais sur une démo pour le :left pseudo-classe et atteint pour columns car c'est un excellent moyen de fragmenter les choses pour imprimer des démos. Donc, je suppose qu'il y a un autre cas d'utilisation. Et en faisant une démo, j'ai réalisé qu'une mise en page multi-colonnes pouvait être utilisée pour créer une grille maçonnée d'éléments, comme une galerie d'images :
Mais quoi d'autre ? Sommes-nous limités à de courts paragraphes, de longues listes et des grilles fluides ?
