Catégories
Astuces et Design

Flexbox-like "juste mettre des éléments dans une rangée" avec grille CSS

Cela m'est venu à l'esprit pendant que nous parlions de flexbox et gap cette raison que nous atteignons parfois pour flexbox est de jeter quelques boîtes d'affilée et de les espacer un peu.

Mon cerveau atteint toujours pour flexbox dans cette situation, et avec gap, il continuera probablement de le faire. Il convient de noter que cette grille peut faire la même chose à sa manière.

Comme ça:

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
}

Ils ont tous la même largeur, mais c'est uniquement parce qu'ils ne contiennent aucun contenu. Avec le contenu, vous verrez les boîtes commencer à se pousser les unes les autres en fonction de la largeur naturelle de ce contenu. Si vous devez exercer un certain contrôle, vous pouvez toujours définir width / min-width / max-width sur les éléments qui tombent dans ces colonnes – ou, définissez-les avec grid-template-columns mais sans pour autant définir le nombre réel de colonnes, puis laisser le min-content dicter la largeur.

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}

Les grilles flexibles sont les plus cool.

Une autre pensée… si vous voulez seulement que la grille entière soit aussi large que le contenu (c'est-à-dire moins de 100% ou auto, si besoin est) alors sachez que display: inline-grid; est une chose.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *