Comment puis-je définir un nombre maximum de colonnes dans une grille CSS sans utiliser de requêtes multimédias ?

Nombre maximum de colonnes dans la grille CSS sans requêtes multimédias

Définition du nombre maximum de colonnes de la grille

Est-il possible de définir une grille avec un maximum défini nombre de colonnes tout en permettant aux éléments de se répartir sur de nouvelles lignes lorsque la taille de la fenêtre change ? Par défaut, les grilles permettent aux colonnes de s'étendre à l'infini, ce qui peut conduire à des dispositions indésirables sur des écrans plus étroits.

Réaliser une grille avec un nombre maximal de colonnes

Pour résoudre ce problème, CSS Grid introduit le concept d'utilisation max() dans la propriété grid-template-columns. La fonction max() accepte deux paramètres : le premier représentant la largeur maximale d'une seule colonne et le second garantissant que chaque colonne reste réactive dans son conteneur parent.

Implémentation

Considérez ce qui suit extrait de code :

.grid-container {
  --n: 4; /* Maximum number of columns */
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(200px, 100%/var(--n)), 1fr)
  );
}

Ici, --n définit le nombre maximum de colonnes. minmax() garantit que chaque colonne a une largeur minimale de 200 px, mais ne dépassera pas 100 %/var(--n). Cette formule garantit qu'à mesure que la largeur du conteneur augmente, la largeur des colonnes ne dépassera jamais 100 %/maximum_number_of_columns, empêchant ainsi la création de colonnes supplémentaires.

Cette technique vous permet de créer des grilles avec un design réactif qui s'adapte aux différents écrans. tailles tout en conservant le nombre maximum de colonnes spécifié.

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!