Création de dispositions avec la grille CSS

GRID CSS: Un puissant outil de mise en page pour la conception Web moderne

Cet extrait du CSS Master de Tiffany, 2e édition , fournit une introduction concise à CSS Grid, un système de mise en page révolutionnaire introduit en octobre 2017. Grid simplifie la création de dispositions complexes nécessitant une vaste manipulation DOM. Bien que les spécifications soient détaillées, cet aperçu couvre les concepts clés et indique des ressources supplémentaires pour l'apprentissage approfondi.

Concepts clés:

• La grille CSS permet la création de dispositions complexes auparavant difficiles ou impossibles à réaliser. Il a obtenu un support de navigateur généralisé en octobre 2017.
• Appliquer display: grid à un élément établit un contexte de formatage de grille, transformant l'élément en un conteneur au niveau des blocs et ses enfants en éléments de grille disposés en lignes et colonnes.
• Les propriétés grid-template-rows et grid-template-columns définissent le nombre et la taille des lignes et des colonnes à l'aide d'une liste de piste séparée dans l'espace (par exemple, longueurs, pourcentages, auto, min-content, max-content).
• Les grilles implicites gère automatiquement les éléments de grille dépassant les cellules explicitement définies, défaut en fonction automatique en fonction du contenu.
• le grid-template raccourci combine les définitions de lignes et de colonnes. La fonction repeat() simplifie les colonnes ou les lignes de répétition, tandis que auto-fit et auto-fill ajuster dynamiquement les comptes de colonne / lignes.

Le contexte de formatage de la grille:

display: grid déclenche un contexte de formatage de grille avec ces effets:

1. L'élément devient un élément au niveau du bloc.
2. Les éléments enfants (ou nœuds de texte) deviennent des éléments de grille de type bloc.
3. Dans les modes d'écriture horizontaux, les hauteurs de ligne correspondent à l'élément le plus haut, sauf si explicitement réglé; Les modes d'écriture verticaux utilisent la longueur de l'élément la plus longue.

display: inline-grid se comporte de la même manière, mais le conteneur reste au niveau en ligne.

Définition des dispositions de grille:

Après avoir défini le récipient de grille, spécifiez les dénombrements de lignes et de colonnes à l'aide de grid-template-rows et grid-template-columns. Ceux-ci acceptent une track list , une chaîne séparée par l'espace définissant les noms et tailles de ligne de grille pour chaque position ou position de colonne.

grilles explicites vs implicites:

Une grille explicite explicite définit toutes les cellules. Une grille implicite implicite étend la grille pour accueillir des éléments supplémentaires au-delà des cellules explicitement définies. Éléments de grille implicites de taille automatique, se développant pour ajuster le contenu ou remplir l'espace restant. grid-auto-rows et grid-auto-columns Contrôler les tailles par défaut pour les éléments de grille implicites, mais l'utilisation minmax() empêche le débordement de contenu.

Grilles flexibles avec des unités flexibles (fr):

Les unités flexibles (fr) représentent les fractions de l'espace disponible, fournissant un dimensionnement proportionnel. Ce sont des rapports, pas des longueurs absolues, et sont incompatibles avec d'autres unités de longueur ou calc().

grid-template raccourci:

la propriété grid-template combine grid-template-rows et grid-template-columns pour la concision.

Répéter les lignes et les colonnes (repeat()):

La fonction repeat() simplifie la création de motifs répétitifs: repeat(number, track list). auto-fit et auto-fill Ajustez dynamiquement le nombre de répétitions en fonction de l'espace disponible. auto-fit ajuste les tailles de piste; auto-fill ajoute des pistes anonymes.

Apprentissage plus approfondi:

Il s'agit d'une introduction de base; De nombreuses ressources offrent des informations plus détaillées, notamment la spécification CSS Grid elle-même, la grille de Rachel Andrew par exemple , le laboratoire de mise en page expérimental de Jen Simmons et la chaîne YouTube Land Yout Land et le guide complet de la grille de CSS-Tricks. "

Conclusion:

La grille CSS est un outil puissant. Cet aperçu fournit une base pour une exploration plus approfondie de ses capacités.

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!