Découvrez CSS Grid simplement : comment organiser facilement des colonnes et des lignes pour créer des layouts modernes et responsive.


CSS Grid, c’est quoi exactement


CSS Grid est un système de mise en page qui permet d’organiser des éléments sur une page web en lignes et colonnes.


Avant Grid, les développeurs utilisaient :

  • float
  • inline-block
  • flexbox
  • ou même des tableaux HTML (oui… vraiment)


Ces méthodes fonctionnaient, mais elles étaient souvent compliquées pour créer des layouts complexes.


CSS Grid a été créé pour résoudre ce problème.


Avec Grid, on peut construire une vraie grille comme dans un logiciel de design.


Le principe d’une grille


Une grille est composée de :

  • colonnes
  • lignes
  • zones


Imaginez une feuille quadrillée.


Chaque élément peut être placé dans une case ou sur plusieurs cases.


Créer une grille en CSS


Pour utiliser Grid, il suffit de transformer un conteneur en grille.


.container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

}

Cela crée 3 colonnes de même taille.


Exemple simple


HTML 


<div class="container">

  <div>Bloc 1</div>

  <div>Bloc 2</div>

  <div>Bloc 3</div>

</div>

CSS 


.container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 20px;

}

Résultat :


Bloc 1 | Bloc 2 | Bloc 3

Chaque bloc occupe une colonne.


Comprendre l’unité fr


L’unité fr signifie fraction.


Elle permet de répartir l’espace disponible.


Exemple :


grid-template-columns: 1fr 2fr;

Résultat :

  • la première colonne prend 1 part
  • la deuxième prend 2 parts


La deuxième colonne sera donc deux fois plus large.


Ajouter des lignes


On peut aussi définir des lignes.


grid-template-rows: 200px 200px;

Cela crée deux lignes de 200 pixels.


Espacer les éléments


La propriété gap permet d’ajouter de l’espace entre les blocs.


gap: 20px;

Avant CSS Grid, il fallait gérer des marges compliquées.


Créer un layout classique de site


Voici un exemple simple de structure de site :

  • header
  • contenu
  • sidebar
  • footer


.layout {

    display: grid;

    grid-template-columns: 3fr 1fr;

    gap: 20px;

}

Résultat :


Contenu principal | Sidebar

Pourquoi CSS Grid est puissant


CSS Grid permet de :

  • créer des layouts complexes
  • organiser facilement les colonnes
  • rendre un site responsive
  • contrôler précisément la disposition des éléments


C’est aujourd’hui l’un des outils les plus puissants du CSS moderne.


Grid vs Flexbox


Les deux technologies sont souvent complémentaires.


Flexbox est idéal pour :

  • aligner des éléments
  • gérer des composants
  • organiser une ligne ou une colonne


Grid est idéal pour :

  • structurer toute une page
  • créer des layouts complexes
  • gérer lignes et colonnes en même temps


Conclusion


CSS Grid simplifie énormément la création de mises en page modernes. En permettant d’organiser facilement les éléments en lignes et colonnes, il offre une solution puissante et flexible pour concevoir des sites web propres, structurés et responsive.


#css #webdev #developpementweb #cssgrid #webdesign #frontend #programmation