Une grille CSS remplissant automatiquement avec des colonnes maximales d'une taille minimale

Drupal 10 présente une nouvelle technique de grille CSS remplissage automatique, et nous sommes ravis de le partager.

Les principales caractéristiques sont:

• Compte de colonne maximum personnalisable, définissant l'état par défaut de la grille.
• Réglage de la colonne dynamique: Si une cellule de grille tombe en dessous d'une largeur minimale spécifiée, la grille réduit automatiquement le nombre de colonnes.
• Utilisation pleine largeur: les cellules de la grille se développent toujours pour remplir la largeur du conteneur, quel que soit le numéro de colonne.
• Conception sans javascript et réactive: fonctionne sur différentes tailles de fenêtre sans javascript.

Grille de remplissage automatique en action

Observez comment la grille réagit lorsqu'elle est comprimée par l'élément draggable à sa gauche.

Le code

Prêt à implémenter? Voici le CSS:

 .grid-container {
  / * Valeurs définies par l'utilisateur * /
  --grid-layout-gap: 10px;
  --grid-column-compty: 4;
  --grid-item - min-large: 100px;

  / * Valeurs calculées * /
  --gap-compty: calc (var (- grid-column-compte) - 1);
  - Total-Gap-Width: Calc (var (- GAP-COUNT) * var (- grille-layout-gap));
  --grid-item --max-width: calc ((100% - var (- total-gap-width)) / var (- grid-column-compte));

  Affichage: grille;
  grille-template-colonnes: répéter (remplissage automatique, Minmax (max (var (- grid-item - min-width), var (- grid-item --max-width)), 1fr));
  grille-gap: var (- grid-layout-gap);
}

Comprendre la grille de remplissage automatique

Ce code exploite les fonctionnalités CSS modernes: les fonctions repeat() , auto-fill() et minmax() de CSS Grid, ainsi que max() et calc() .

auto-fill() expliqué

auto-fill() est crucial pour remplir dynamiquement les lignes avec des colonnes. Pour une plongée plus profonde dans auto-fill() contre auto-fit() , voir l'excellent article et la vidéo d'accompagnement de Sara Soueidan.

Gérer les limites de colonne avec max()

La fonction max() empêche des colonnes excessives. Il garantit que la largeur de chaque cellule de grille ne dépasse pas un pourcentage calculé tout en maintenant une largeur minimale. Le calcul explique les lacunes de la grille:

 Max (calc (25% -<grid-gap-for-one-cell> ), 100px)</grid-gap-for-one-cell>

Ceci est réalisé en utilisant les variables CSS:

 --gap-compty: calc (var (- grid-column-compte) - 1);
- Total-Gap-Width: Calc (var (- GAP-COUNT) * var (- grille-layout-gap));
--grid-item --max-width: calc ((100% - var (- total-gap-width)) / var (- grid-column-compte));

Cela calcule dynamiquement la largeur maximale, en considérant le nombre de colonnes et de lacunes.

Assurer la pleine largeur avec minmax()

minmax() garantit que les cellules de la grille s'étirent toujours pour remplir la largeur du conteneur. Il définit une largeur minimale et permet l'expansion à 1fr (unité fractionnaire) si l'espace le permet:

 Minmax (<grid-item-width> , 1fr)</grid-item-width>

La solution complète

En combinant ces éléments, le code final atteint le comportement de remplissage automatique souhaité:

 --gap-compty: calc (var (- grid-column-compte) - 1);
- Total-Gap-Width: Calc (var (- GAP-COUNT) * var (- grille-layout-gap));
--grid-item --max-width: calc ((100% - var (- total-gap-width)) / var (- grid-column-compte));

grille-template-colonnes: répéter (remplissage automatique, Minmax (max (var (- grid-item - min-width), var (- grid-item --max-width)), 1fr));

Le pouvoir de CSS

Cet exemple présente les capacités avancées du CSS moderne. Nous avons créé une disposition complexe sans JavaScript, démontrant l'évolution de CSS.

Merci à Andy Blum pour la suggestion d'utiliser auto-fill() , et aux scénaristes et implémenteurs de spécifications CSS pour rendre cela possible.

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!