Le guide complet de la disposition de la grille CSS

Pour maîtriser la grille CSS, utilisez d'abord l'affichage: grille pour créer un conteneur de grille et utilisez des colonnes / lignes de la grille-template pour définir les tailles de lignes et de colonnes, prenant en charge les valeurs FR, auto et fixe; 2. Utilisez l'espace pour régler l'espacement de la grille pour éviter d'utiliser la marge; 3. Placez les projets avec précision via la colonne de grille / row ou la zone de grille et utilisez des zones de réchauffe de grille pour améliorer la lisibilité; 4. Utilisez la répétition (Auto-Fit, Minmax (250px, 1FR)) pour obtenir une adaptation de colonnes réactive; 5. Master Justify-Content / Align-Content (la grille est alignée) et Justify-Items / Align-Items (les éléments sont alignés dans la cellule), et utilisent le justification-self / align-soi pour couvrir l'alignement des éléments individuels; Enfin, la grille convient aux dispositions bidimensionnelles telles que la structure de la page, et Flexbox est utilisé pour les dispositions unidimensionnelles telles que les barres de navigation. La combinaison des deux fonctionne mieux.

La disposition de la grille CSS est un outil puissant pour créer des conceptions Web complexes et réactives avec un code minimal. Contrairement aux anciennes méthodes de disposition (comme les flotteurs ou le bloc en ligne), Grid vous donne un véritable contrôle bidimensionnel - ce qui signifie que vous pouvez aligner les éléments à la fois horizontalement et verticalement avec précision.

Si vous commencez simplement ou si vous voulez profondément votre compréhension, voici un guide pratique sans flux pour maîtriser la grille CSS:

✅ 1. Commencez par les bases: display: grid

Pour activer la grille sur un conteneur, utilisez:

 .Container {
  Affichage: grille;
}

Cela transforme les enfants directs en articles de grille . De là, définissez des colonnes et des lignes:

 .Container {
  Affichage: grille;
  Grid-Template-Colonnes: 100px 200px 1FR; / * 3 colonnes * /
  Grid-Template Rows: 50px Auto; / * 2 lignes * /
}

• fr = fraction de l'espace disponible
• auto = taille basée sur le contenu
• 100px = taille fixe

? Conseil de pro: utilisez repeat() pour éviter la répétition:

 grille-template-colonnes: répéter (3, 1fr); / * 3 colonnes égales * /

✅ 2. Espacement de contrôle: gap

Ajouter un espacement cohérent entre les lignes et les colonnes:

 .Container {
  Écart: 10px; / * Idem pour les lignes et les colonnes * /
  /* ou */
  Row-Gap: 10px;
  colonne-gap: 20px;
}

Évitez d'utiliser des marges pour l'espacement à l'intérieur des éléments de la grille - gap est plus propre et ne s'effondre pas.

✅ 3. Placer les articles précisément

Utilisez le placement en ligne pour positionner les éléments:

 .article {
  Colonne de grille: 2/4; / * commence à la ligne 2, se termine à la ligne 4 * /
  Grid-Row: 1/3; / * s'étend sur 2 lignes * /
}

Ou utilisez un sténographie:

 Arie de grille: 1/2/3/4; / * row-start / col-start / row-end / col-end * /

Vous pouvez également nommer des zones pour plus de clarté:

 .Container {
  Grid-Template-Areas:
    "En-tête d'en-tête"
    "MAINE MAIN MAIN"
    "pied de page de pied de page";
}

.Header {Grid-Area: En-tête; }
.Bar de la casse {Grid-Area: barre latérale; }

✅ 4. Les grilles réactives sont facilitées

Oubliez les requêtes multimédias pour la réactivité de base - utilisez minmax() et auto-fit :

 .Container {
  grille-template-colonnes: répéter (auto-fit, Minmax (250px, 1fr));
}

Cela crée autant de colonnes de 250px de large que dans le conteneur, chacun augmente également ( 1fr ) s'il y a un espace supplémentaire.

? Cela remplace des blocs de requête multimédia entiers pour de nombreuses dispositions.

✅ 5. Aligner le contenu comme un pro

Grid a deux niveaux d'alignement:

• Alignement de la piste (comment toute la grille s'inscrit dans son conteneur):

   Justification-contenu: centre; / * le long de l'axe en ligne * /
  ALIGN-CONTENT: START; / * le long de l'axe de bloc * /

• Alignement des éléments (comment les éléments se comportent dans leurs cellules):

   Justification-Items: Centre; / * aligner les éléments horizontalement * /
  Align-Items: Centre; / * aligner les éléments verticalement * /

Vous pouvez également remplacer l'alignement par article:

 .article {
  Justifier-moi: fin;
  ALIGN-SEG: Démarrer;
}

✅ bonus: quand utiliser la grille vs flexbox

• Utilisez la grille lorsque vous avez besoin de mise en page dans les deux dimensions (colonnes de lignes) - comme des mises en page pleine page, des tableaux de bord ou des galeries d'images.
• Utilisez Flexbox lorsque la disposition est unidimensionnelle - comme les barres de navigation, les boutons centrés ou les éléments d'empilement dans une seule direction.

Ils fonctionnent très bien ensemble: grille pour la structure globale, Flexbox pour les composants à l'intérieur des cellules de la grille.

La grille CSS n'est pas seulement une autre méthode de mise en page - c'est un changement d'esprit. Une fois que vous serez à l'aise avec les lignes, les pistes et les zones nommées, vous vous demanderez comment vous avez déjà construit des dispositions sans elle.

Démarrer petit: construire une disposition de carte ou une simple page à 3 colonnes. Ensuite, passez à des conceptions réactives complètes. Ce n'est pas magique - juste CSS intelligent et structuré.

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!