Maison > interface Web > tutoriel CSS > Comment puis-je créer une disposition de grille fluide verticalement en CSS ?

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

Susan Sarandon
Libérer: 2024-12-24 04:34:14
original
479 Les gens l'ont consulté

How Can I Create a Vertically Flowing Grid Layout in 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;
}
Copier après la connexion

Exemple :

<div>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal