Comment puis-je remplir une grille CSS verticalement avec un nombre fixe de colonnes ?

Faire en sorte que le conteneur de grille remplisse des colonnes, pas des lignes

Question :

Comment puis-je créer une grille CSS qui remplit verticalement plutôt qu'horizontalement, permettant un nombre arbitraire de lignes tout en conservant un nombre fixe de colonnes ?

Réponse :

Bien que CSS Grid Layout ne puisse pas gérer nativement cette mise en page spécifique, CSS Multi-Column Layout offre une solution.

Mise en page multi-colonnes CSS :

#container {
  column-count: 3;
}

Ce code définit un conteneur avec trois colonnes qui créera automatiquement de nouvelles colonnes si nécessaire, répondant aux exigences de flux vertical.

Limites de la disposition de la grille CSS :

Dans la disposition de la grille CSS, grille-auto-flow et grille-modèle-colonnes ont une relation inverse :

• Avec grille-auto-flow : ligne (le par défaut) et les colonnes de modèle de grille définies, les éléments s'écoulent horizontalement, créant automatiquement de nouvelles lignes.
• Cependant, l'inversion de ces propriétés (flux de grille automatique : colonnes et lignes de modèle de grille définies) entraîne un résultat invalide. déclaration.

Par conséquent, obtenir une grille à remplissage vertical avec un nombre fixe de colonnes n'est pas possible en utilisant uniquement CSS Grid Layout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!