Design Responsive avec CSS Grid

CSS Grid est un système de mise en page bidimensionnel qui a révolutionné la façon dont nous concevons des interfaces web. Contrairement à Flexbox qui est principalement unidimensionnel, Grid permet de contrôler à la fois les lignes et les colonnes, ce qui en fait un outil idéal pour créer des mises en page complexes et responsives.

Introduction à CSS Grid

CSS Grid permet de diviser une page en une grille de lignes et de colonnes, puis de placer des éléments dans cette grille. C’est comme avoir un système de tableau HTML, mais avec beaucoup plus de flexibilité et de contrôle.

Création d’une grille de base

Pour créer une grille, utilisez la propriété display: grid sur un conteneur :

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 colonnes de 200px */
  grid-template-rows: 100px 100px; /* 2 lignes de 100px */
  gap: 20px; /* Espace entre les cellules */
}

Unités fr et repeat()

L’unité fr (fraction) est particulièrement utile pour créer des mises en page responsives :

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Proportion 1:2:1 */
  grid-template-rows: auto;
}

La fonction repeat() permet de répéter des valeurs :

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
  grid-template-rows: repeat(2, 100px); /* 2 lignes de 100px */
}

Placement des éléments dans la grille

Vous pouvez placer des éléments précisément dans la grille :

.item1 {
  grid-column: 1 / 3; /* De la ligne 1 à la ligne 3 */
  grid-row: 1 / 2; /* De la rangée 1 à la rangée 2 */
}

/* Ou avec les propriétés start/end */
.item2 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

Grilles responsives avec minmax() et auto-fill/auto-fit

La fonction minmax() permet de définir une taille minimale et maximale :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

• auto-fill : crée autant de colonnes que possible
• auto-fit : étire les colonnes existantes pour remplir l’espace

Zones de grille nommées

Vous pouvez nommer des zones de votre grille pour un placement plus intuitif :

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Exemple de mise en page responsive

Voici un exemple de mise en page responsive qui s’adapte à différentes tailles d’écran :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

/* Sur les petits écrans, empiler les éléments */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Mise en page avancée avec Grid Areas

Vous pouvez créer des mises en page complexes qui changent en fonction de la taille de l’écran :

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Alignement dans Grid

CSS Grid offre plusieurs propriétés pour aligner les éléments :

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Alignement horizontal des éléments dans leurs cellules */
  justify-items: start | end | center | stretch;
  
  /* Alignement vertical des éléments dans leurs cellules */
  align-items: start | end | center | stretch;
  
  /* Alignement horizontal de la grille entière */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* Alignement vertical de la grille entière */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Exemple pratique : Galerie d’images responsive

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

Conclusion

CSS Grid est un outil puissant pour créer des mises en page web responsives et complexes. En combinant Grid avec les media queries, vous pouvez créer des sites qui s’adaptent parfaitement à n’importe quelle taille d’écran.

Pour approfondir vos connaissances sur CSS Grid, je vous recommande d’explorer la documentation sur MDN et de pratiquer avec des outils interactifs comme Grid Garden.