Flexbox 'juste mettre des éléments d'affilée' avec la grille CSS

Parfois, nous utilisons Flexbox simplement pour organiser des éléments d'affilée avec l'espacement. Bien que Flexbox avec gap reste une solution pratique, il convient de se rappeler que CSS Grid offre une capacité similaire.

Considérez cet exemple:

 .grille {
  Affichage: grille;
  Écart: 1rem;
  grille-automne-flux: colonne;
}

Les éléments semblent également larges sans contenu, mais avec le contenu, ils s'ajusteront en fonction de leurs largeurs naturelles. Pour plus de contrôle, utilisez width , min-width , max-width sur les éléments de la grille ou définissez grid-template-columns avec repeat(auto-fit, minmax(min-content, 1fr)) pour permettre à la largeur de contenu minimale de déterminer la largeur de la colonne.

 .grille {
  Affichage: grille;
  Écart: 1rem;
  grille-automne-flux: colonne;
  grille-template-colonnes: répéter (auto-fit, Minmax (min-contenu, 1FR));
}

Les grilles flexibles sont incroyablement puissantes.

Enfin, si vous avez besoin que la grille ne prenne que la largeur de son contenu (moins de 100%, ou même auto ), n'oubliez pas cet display: inline-grid; est une option.

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!