Pourquoi CSS Grid : guide complet ?
CSS Grid est un outil puissant et flexible pour la mise en page des sites web. En 2016, il a été introduit avec les navigateurs modernes comme Chrome, Firefox et Edge. Il offre une solution complète pour créer des layouts complexes et réactifs sans avoir recours à des techniques plus complexes comme Flexbox ou à des tableaux HTML.
Un cas d'usage concret est la création d'un site e-commerce avec des produits organisés en grilles dynamiques qui s'adaptent aux tailles d'écran différentes.
Prerequis
- Connaissance de base de CSS
- Un éditeur de code (VSCode recommandé)
- Navigateur moderne
Concepts fondamentaux
1. Container Grid et Items
Le conteneur grid est le parent qui définit la structure de la grille, tandis que les items sont les enfants qui se placent dans la grille.
/* CSS */
.container {
display: grid; /* Active la grille sur le conteneur */
}
.item {
/* Styles pour les items */
}
2. Les lignes et colonnes
Les lignes et colonnes définissent l'espace disponible dans la grille.
/* CSS */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes de même largeur */
grid-template-rows: auto; /* Hauteur automatique des lignes */
}
3. Ajuster la hauteur et la largeur
Vous pouvez spécifier la hauteur et la largeur des items individuellement.
/* CSS */
.item {
grid-column-start: 1;
grid-column-end: span 2; /* Item qui s'étend sur 2 colonnes */
grid-row-start: 1;
grid-row-end: span 3; /* Item qui s'étend sur 3 lignes */
}
4. Alignement des items
Les items peuvent être alignés horizontalement et verticalement.
/* CSS */
.container {
display: grid;
justify-items: center; /* Centrer les items horizontalement */
align-items: center; /* Centrer les items verticalement */
}
5. Les espaces entre les lignes et colonnes
Vous pouvez ajouter des espaces entre les lignes et colonnes.
/* CSS */
.container {
display: grid;
grid-gap: 10px; /* Espace de 10px entre les items */
}
6. Les axes principaux et secondaires
Les axes principaux sont horizontaux (row) et les axes secondaires sont verticaux (column).
/* CSS */
.container {
display: grid;
grid-auto-flow: row; /* Flotter dans l'axe des lignes */
}
7. Les zones nommées
Les zones nommées vous permettent de définir un nom à une zone de la grille.
/* CSS */
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.item-header { grid-area: header; }
.item-sidebar { grid-area: sidebar; }
.item-main { grid-area: main; }
.item-footer { grid-area: footer; }
Mise en pratique : projet fil rouge
Nous allons créer un simple layout d'un site e-commerce avec une grille de produits.
Étape 1 : Structure du projet
Créez un nouveau dossier pour votre projet et ajoutez les fichiers suivants :
index.htmlstyles.css
Étape 2 : Code HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site E-commerce</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="item-header">Header</header>
<nav class="item-sidebar">Sidebar</nav>
<main class="item-main">
<div class="product-card">Product 1</div>
<div class="product-card">Product 2</div>
<div class="product-card">Product 3</div>
<!-- Ajoutez plus de produits -->
</main>
<footer class="item-footer">Footer</footer>
</div>
</body>
</html>
Étape 3 : Code CSS
/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 10px;
height: 100vh;
}
.item-header, .item-sidebar, .item-footer, .product-card {
padding: 20px;
border: 1px solid #ccc;
}
.item-header {
background-color: #f4f4f4;
grid-area: header;
}
.item-sidebar {
background-color: #e9ecef;
grid-area: sidebar;
}
.item-main {
grid-area: main;
}
.product-card {
background-color: white;
text-align: center;
}
Étape 4 : Exécuter le projet
Assurez-vous que vous avez un serveur local en cours d'exécution. Vous pouvez utiliser http-server pour cela.
npm install -g http-server
http-server
Ouvrez votre navigateur et allez à http://localhost:8080.
Erreurs frequentes et debugging
1. Erreur : Items ne s'affichent pas correctement
Code incorrect :
.item {
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 1;
grid-row-end: span 2;
}
Code correct :
.item {
grid-column: 1 / span 3;
grid-row: 1 / span 2;
}
2. Erreur : Grid-gap n'affecte pas les items
Code incorrect :
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
/* Styles pour les items */
}
Code correct :
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* Utilisation de 'gap' au lieu de 'grid-gap' */
}
3. Erreur : Items ne s'étendent pas sur plusieurs lignes
Code incorrect :
.item {
grid-row-start: 1;
grid-row-end: span 2;
}
Code correct :
.item {
grid-row: 1 / span 2; /* Utilisation de 'grid-row' au lieu de 'grid-row-*' */
}
Pour aller plus loin
1. Concepts avancés
- Grid Auto-flow: Explorez comment les items sont disposés en fonction de la disposition automatique.
- Grid Template Rows et Columns: Découvrez comment définir des lignes et colonnes flexibles.
- Grid Areas et Grid Templates Names: Apprenez à utiliser des zones nommées pour une organisation plus structurée.
2. Projets pratiques
- Site Portfolio: Créez un portfolio personnel avec une galerie de photos et des sections de présentation.
- Blog Simple: Développez un blog simple avec des articles en grille et une barre latérale.
3. Défis personnels
- Implémentez un système d'affichage responsive pour différents écrans (mobile, tablette, ordinateur).
- Ajoutez des effets de transition et d'animation aux items de la grille.
En suivant ce guide complet, vous devriez être en mesure de créer des layouts complexes et réactifs utilisant CSS Grid. N'hésitez pas à expérimenter et à approfondir chaque concept pour améliorer vos compétences en développement web.