Comment puis-je créer une disposition de grille fluide verticalement en CSS ?

Conteneur de grille à écoulement vertical

Dans CSS Grid Layout, définir le conteneur de grille pour qu'il s'écoule verticalement plutôt qu'horizontalement n'est pas directement possible. La question se pose de savoir si le nombre de colonnes ou de lignes doit être spécifié, car CSS Flexbox propose l'attribut flex-direction.

Limitations de la disposition de la grille CSS

Le problème avec CSS La disposition en grille est la relation inverse entre les propriétés de flux automatique de grille et de modèle de grille de lignes/colonnes. Lorsque grid-auto-flow : row est défini avec grid-template-columns, les éléments de la grille créent automatiquement des lignes, s'écoulant dans une direction horizontale.

Alternative de mise en page multi-colonnes

Pour une grille véritablement fluide verticalement, la mise en page CSS multi-colonnes doit être envisagée. Ce module permet de créer de nouvelles colonnes si nécessaire, sans définir de lignes :

#container {
  column-count: 3;
}

Exemple :

<div>

Ce code créera une grille fluide verticalement avec trois colonnes.

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!