CSS Grid est-il la solution ultime pour les mises en page complexes ?

Mise en page en grille : une solution moderne pour les mises en page complexes

Votre quête d'une solution qui s'étend à la fois sur les lignes et les colonnes dans un non-tableau, la disposition sans grille a été bien documentée dans les discussions précédentes. Cependant, la situation a évolué avec les récentes mises à jour des navigateurs.

Grille CSS : un changement de donne

La disposition en grille CSS est désormais entièrement prise en charge par tous les principaux navigateurs, offrant une solution robuste et flexible pour les aménagements complexes. Il élimine le besoin de modifier le code HTML, d'ajouter des conteneurs imbriqués ou de définir des hauteurs de conteneur fixes.

Implémentation de la disposition en grille

1. Définissez la propriété d'affichage de l'élément wrapper à la grille pour activer la disposition de la grille.
2. Définissez les colonnes et les lignes de la grille à l'aide de grid-template-columns et grid-auto-rows.
3. Définissez la propriété grid-gap pour spécifier l'espacement entre les éléments.
4. Utilisez les propriétés grid-row et grid-column sur les éléments pour contrôler leur positionnement dans la grille.

Exemple avec disposition en grille

Considérez le code suivant extrait qui intègre CSS Grid :

#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}

.block {
  background-color: red;
}

Prise en charge améliorée du navigateur

À partir d'aujourd'hui, CSS Grid est entièrement pris en charge par :

• Chrome 57
• Firefox 52
• Safari 10
• Edge 15
• Opera 44

Cela signifie que vous pouvez désormais utiliser CSS Grid en toute confiance pour créer des mises en page complexes sans craindre les problèmes de compatibilité du navigateur.

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!