10.1 Combinaison avec les media queries
CSS Grid Layout offre de super outils pour créer des mises en page complexes et adaptatives. Combiner CSS Grid avec des media queries permet de créer des mises en page qui s'adaptent à différentes tailles d'écran et dispositifs. Voyons comment utiliser les media queries avec CSS Grid pour créer des pages web flexibles et adaptatives.
Concepts principaux des media queries
Les media queries permettent d'appliquer différents styles CSS en fonction des caractéristiques du dispositif, comme la largeur de l'écran, la hauteur de l'écran, l'orientation, etc. En combinaison avec CSS Grid, les media queries permettent de modifier la structure et le placement des éléments en fonction de la taille de l'écran.
Synthaxe des media queries :
@media (condition) {
/* Styles appliqués lorsque la condition est remplie */
}
Où «condition» est la condition à laquelle les styles seront appliqués.
Le plus souvent, on utilise des conditions liées à la largeur de l'écran, comme max-width et min-width.
10.2 Changer le nombre de colonnes
Exemple de mise en œuvre complète (changer le nombre de colonnes en fonction de la largeur de l'écran) :
/* Style de base pour tous les écrans */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Pour les écrans plus larges que 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
}
}
/* Pour les écrans plus larges que 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Trois colonnes */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mise en page adaptative avec CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Élément 1</div>
<div class="grid-item">Élément 2</div>
<div class="grid-item">Élément 3</div>
<div class="grid-item">Élément 4</div>
<div class="grid-item">Élément 5</div>
<div class="grid-item">Élément 6</div>
</div>
</body>
</html>
Explication du code :
- Style de base: crée un conteneur Grid avec une colonne pour tous les écrans
- Media query pour les écrans plus larges que 600px: change la mise en page à deux colonnes
- Media query pour les écrans plus larges que 900px: change la mise en page à trois colonnes
10.3 Dépendance à la largeur de l'écran
Exemple de mise en œuvre complète (changer le placement des éléments en fonction de la largeur de l'écran) :
/* Style de base pour tous les écrans */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* Pour les écrans plus larges que 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Pour les écrans plus larges que 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placement adaptatif avec CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Explication du code :
- Style de base: crée un conteneur Grid avec quatre lignes et une colonne pour tous les écrans
- Media query pour les écrans plus larges que 600px: change la mise en page à deux colonnes et modifie le placement des zones : l'en-tête occupe deux colonnes, le contenu principal et la barre latérale occupent chacun une colonne, le pied de page occupe deux colonnes
- Media query pour les écrans plus larges que 900px: change la mise en page à trois colonnes et modifie le placement des zones : l'en-tête occupe trois colonnes, le contenu principal et la barre latérale occupent respectivement une et deux colonnes, le pied de page occupe trois colonnes
10.4 Modifier la taille des éléments
Exemple de mise en œuvre complète (modifier la taille des éléments en fonction de la largeur de l'écran) :
/* Style de base pour tous les écrans */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Pour les écrans plus larges que 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Pour les écrans plus larges que 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailles adaptatives avec CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Élément 1</div>
<div class="grid-item item2">Élément 2</div>
<div class="grid-item item3">Élément 3</div>
<div class="grid-item item4">Élément 4</div>
<div class="grid-item item5">Élément 5</div>
<div class="grid-item item6">Élément 6</div>
</div>
</body>
</html>
Explication du code :
- Style de base: crée un conteneur Grid avec deux colonnes et des lignes automatiques de hauteur
100pxpour tous les écrans - Media query pour les écrans plus larges que 600px: change la mise en page à trois colonnes et augmente la hauteur des lignes à
150px - Media query pour les écrans plus larges que 900px: change la mise en page à quatre colonnes et augmente la hauteur des lignes à
200px
GO TO FULL VERSION