Techniques avancées de grille CSS

Conférence 10 : Techniques avancées de grille CSS

Bienvenue à la dixième conférence du cours "De base à Brilliance". Dans cette conférence, nous approfondirons les techniques avancées de grille CSS. Ces techniques vous permettront de créer des mises en page encore plus complexes et réactives. À la fin de cette conférence, vous serez capable de travailler avec des zones de grille, du placement automatique de grille et de combiner CSS Grid avec d'autres systèmes de mise en page comme Flexbox.

---

1. Zones de grille

Les zones de grille vous permettent d'attribuer des noms aux sections de votre grille, ce qui facilite la gestion et la visualisation de votre mise en page.

• Exemple : Nommer les zones de grille pour une mise en page avec un en-tête, une barre latérale, un contenu et un pied de page.

HTML :

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS :

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Dans cet exemple :

• Grid Areas : la propriété grid-template-areas définit une mise en page avec trois sections : un en-tête s'étendant sur deux colonnes, une barre latérale et un contenu principal au milieu, et un pied de page.
• En attribuant des éléments de grille (en-tête, barre latérale, etc.) à des zones spécifiques, vous contrôlez la mise en page plus efficacement.

---

2. Placement automatique de la grille

CSS Grid dispose d'une fonction de placement automatique qui positionne automatiquement les éléments de la grille lorsqu'ils ne sont pas explicitement placés. Vous pouvez contrôler comment cela fonctionne à l'aide de grid-auto-flow.

• Valeurs :

  • rangée : les éléments sont placés ligne par ligne (par défaut).
  • colonne : les éléments sont placés colonne par colonne.
  • dense : les éléments seront emballés dans des espaces vides de la grille.

• Exemple :
  
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense; /* Auto-places items and packs them densely */
  }

Dans ce cas, les éléments de la grille seront placés ligne par ligne et les éléments plus petits combleront les espaces vides.

---

3. Utilisation de la fonction minmax()

La fonction minmax() vous permet de définir une plage pour les pistes de grille, par exemple en spécifiant la taille minimale et maximale qu'une piste de grille peut prendre.

• Exemple :

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

Dans cet exemple :

• La grille comporte trois colonnes.
• Chaque colonne fera au moins 150px de large mais pourra s'agrandir pour remplir l'espace disponible (1fr).

---

4. Remplissage automatique de la grille ou ajustement automatique

Le remplissage et l'ajustement automatiques sont tous deux utilisés pour créer des grilles dynamiques, mais ils fonctionnent légèrement différemment :

• Remplissage automatique : ajoute autant de colonnes que possible, même si elles sont vides.

• Ajustement automatique : réduit ou agrandit les colonnes pour s'adapter à l'espace disponible.

• Exemple : Comparaison de l'ajustement automatique et du remplissage automatique.
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Auto-fill */
  }

  .grid-container-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Auto-fit */
  }

Les deux options ajustent automatiquement le nombre de colonnes en fonction de l'espace disponible, mais l'ajustement automatique réduira les colonnes vides.

---

5. Combiner CSS Grid avec Flexbox

Bien que CSS Grid soit idéal pour structurer la mise en page globale, Flexbox est parfait pour contrôler l'alignement au sein d'éléments individuels. Vous pouvez combiner les deux pour gérer différentes parties de votre mise en page.

• Exemple : Utilisation de CSS Grid pour la mise en page principale et de Flexbox pour l'alignement à l'intérieur des éléments de la grille.

HTML :

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS :

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexbox-item {
  padding: 20px;
  background-color: #ddd;
}

Dans cet exemple :

• Mise en page en grille : La mise en page globale est structurée avec CSS Grid, avec un en-tête, un contenu et un pied de page.
• Flexbox : La section de contenu utilise Flexbox pour aligner les éléments à l'intérieur.

---

6. Grilles implicites ou explicites

Les grilles peuvent être définies explicitement (en utilisant des colonnes de modèle de grille et des lignes de modèle de grille) ou implicitement (où de nouvelles pistes sont créées automatiquement).

• Grille explicite : Vous définissez le nombre de lignes et de colonnes.

• Grille implicite : La grille crée automatiquement des lignes ou des colonnes pour accueillir des éléments supplémentaires.

• Exemple :
  

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* Implicitly adds rows */
  }

Dans ce cas, la grille créera automatiquement de nouvelles lignes si plus d'éléments sont ajoutés que ne peuvent en contenir les colonnes définies.

---

7. Création d'une mise en page de grille pleine page

Utilisons CSS Grid pour créer une mise en page pleine page réactive avec un en-tête, une zone de contenu principale, une barre latérale et un pied de page.

HTML :

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS :

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Full height layout */
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 20px;
}

.main-content {
  grid-area: main;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

Dans cet exemple :

• Zones de grille : la mise en page se compose d'un en-tête, d'une barre latérale, d'un contenu principal et d'un pied de page.
• La grille ajuste automatiquement la hauteur de chaque section, remplissant toute la hauteur de la fenêtre.

---

Exercice pratique

1. Créez une mise en page de blog réactive avec un en-tête, une barre latérale, un contenu principal et un pied de page à l'aide de CSS Grid.
2. Utilisez des zones de modèle de grille pour définir la structure.
3. Rendre la mise en page réactive en ajustant le nombre de colonnes sur différentes tailles d'écran.

---

Prochaine étape : Dans la prochaine conférence, nous explorerons le Positionnement CSS et comment positionner des éléments à l'aide de propriétés telles que absolue, relative et fixe. Préparez-vous à améliorer encore davantage votre contrôle de mise en page !

---

suivez-moi sur LinkedIn

Ridoy Hasan

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!