Sections extensibles dans une grille CSS

CSS Grid est un outil fantastique pour créer des dispositions réactives avec un code minimal, éliminant souvent le besoin de requêtes multimédias. Je suis à l'aise de l'utiliser pour diverses dispositions, priorisant le HTML propre. Cependant, un défi d'interface utilisateur récent a présenté un problème unique: l'élargissement d'une cellule de grille à pleine largeur lorsqu'un bouton a été cliqué, tout en maintenant la structure et la réactivité de la grille d'origine.

L'exigence était que la cellule élargie:

1. Apparaissent directement sous la cellule déclenchante.
2. Occupez la largeur de la grille complète.

La solution, étonnamment élégante, n'utilise que quelques lignes de grille CSS. Cet article détaille trois techniques de grille CSS simples pour y parvenir sans JavaScript.

Le problème: cartes de produits extensibles

Voici un exemple simplifié de la tâche d'interface utilisateur: notre bibliothèque de composants de contes présente une grille de cartes de produits. Chaque carte avait besoin d'un bouton "View rapide" pour révéler une carte plus grande et pleine largeur avec des informations détaillées sur le produit. Cette expansion devait:

• Insérez dynamiquement la carte pleine largeur sous la carte cliquée.
• Préservez l'ordre de DOM d'origine et l'arrangement de la grille visuelle.
• Restez pleinement réactif sur le redimensionnement du navigateur.

Au départ, j'ai supposé que JavaScript serait nécessaire pour repositionner les cartes. Les recherches en ligne pour les implémentations de «vue rapide» ont principalement donné des solutions modales ou de superposition. Les modaux sont communs pour le contenu ciblé, mais je voulais une solution qui s'intégrait de manière transparente dans la grille.

La solution est venue de la combinaison de plusieurs puissantes caractéristiques de la grille CSS.

CSS Grid Trick # 1: Colonnes ajustées

Mon système de grille existant a déjà utilisé cette technique:

 .grille {
  Affichage: grille;
  Écart: 1rem;
  grille-template-colonnes: répéter (auto-fit, 20rem);
}

grid-template-columns: repeat(auto-fit, 20rem); Crée des colonnes (20rem de large ici) qui s'adaptent automatiquement à l'espace disponible, enveloppant les nouvelles lignes au besoin. L'explication de Sara Soueidan sur auto-fit vs auto-fill est excellente. Pour plus de simplicité, j'ai utilisé des largeurs de colonne fixes.

CSS Grid Trick # 2: pleine largeur

Pour accueillir la carte élargie:

 .fullwidth {
  grille-colonne: 1 / -1;
}

Puisque l'astuce n ° 1 crée une grille explicite, grid-column: 1 / -1; s'étend sur toute la largeur (de la colonne 1 à la dernière).

Cependant, cela laisse des lacunes au-dessus de la carte pleine largeur.

CSS Grid Trick # 3: Emballage dense

Le remplissage de ces lacunes utilise une approche en fausse maçonnerie:

 .grille {
  Grid-Auto-Flow: dense;
}

grid-auto-flow: dense; optimise le placement automatique, remplissant les lacunes plus tôt dans la grille. Cela fonctionne efficacement lorsque:

• Toutes les colonnes ont la même largeur (ou utilisent minmax() pour des largeurs flexibles).
• Toutes les cellules à l'intérieur d'une ligne ont la même hauteur (la valeur par défaut; align-items: stretch fait implicitement les cellules remplir la hauteur des lignes).

L'ordre DOM d'origine est conservé, crucial pour l'accessibilité. MDN fournit une explication complète du placement automatique du réseau CSS.

La solution complète

Ces trois techniques créent une disposition simple et efficace avec un CSS minimal, pas de requêtes multimédias et pas de JavaScript pour les calculs de disposition.

Le rôle de JavaScript

JavaScript reste nécessaire, mais uniquement pour les fonctionnalités: gérer les événements de clic, concentrer et afficher la carte injectée. Dans le prototype, les cartes pleine largeur sont codées en dur; JavaScript bascule leur visibilité.

Dans un environnement de production, la carte serait probablement récupérée dynamiquement et insérée. Pour éviter de faire gonfler le DOM, le contenu injecté doit être considéré comme une amélioration progressive; Si JavaScript échoue, les utilisateurs sont redirigés vers la page Détails du produit.

Considérations d'accessibilité

Priorization HTML sémantique, attributs Aria et navigation au clavier:

• La grille utilise<ul> pour une clarté sémantique.</ul>
• Les cartes de produits sont<li> Éléments avec des titres appropriés.</li> <li> L'ordre DOM est conservé pour l'ordre d'onglet naturel.</li> <li> La gestion de la mise au point assure une bonne navigation au clavier. (D'autres améliorations pourraient inclure des étiquettes explicites pour la carte injectée, la liaison des clés <kbd>ESC</kbd> pour la fermeture et le défilement de la fenêtre pour assurer la visibilité).</li>

Conclusion

Cette approche offre une alternative propre aux modaux, révélant un contenu supplémentaire sans masquer la page. Il pourrait être utile pour divers scénarios, tels que les légendes d'image ou le texte d'assistance, potentiellement remplacer <details>/<summary></summary></details> Dans certains cas. J'ai hâte d'entendre vos pensées et vos approches alternatives.

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!