Comment faire en sorte qu'un conteneur de grille CSS remplisse des colonnes au lieu de lignes ?

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

Dans CSS Grid Layout, la propriété grid-auto-flow détermine si les éléments sont disposés en lignes ou en colonnes. Lorsqu'ils sont définis sur ligne, ce qui est le paramètre par défaut, les éléments sont placés horizontalement, créant de nouvelles lignes selon les besoins. Ce comportement n'est généralement pas idéal si la disposition souhaitée est verticale.

Lorsque grid-auto-flow est défini sur row, grid-template-columns définit le nombre de colonnes dans la grille. Cependant, dans ce scénario, les éléments s'écoulent toujours horizontalement, remplissant les lignes plutôt que les colonnes.

Pour une grille s'écoulant verticalement qui crée de nouvelles colonnes si nécessaire, sans définir de lignes, envisagez d'utiliser CSS Multi-Column Mise en page à la place. Il permet d'empiler verticalement des éléments, créant automatiquement de nouvelles colonnes selon les besoins.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

Cet extrait de code illustre le concept. Les éléments circuleront horizontalement, créant de nouvelles lignes si nécessaire, malgré la définition de trois colonnes dans la propriété grid-template-columns. Notez que l'utilisation de CSS Grid Layout pour cette mise en page spécifique n'est pas recommandée.

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!