Grid CSS : maîtrisez la mise en page moderne

Pendant longtemps, mettre en page un site web relevait presque du bricolage. On empilait des blocs, on jouait avec des marges, on croisait les doigts pour que tout reste à peu près aligné. Puis Flexbox est arrivé et a déjà changé beaucoup de choses. Mais il restait un problème de taille : organiser une page complète, en deux dimensions, proprement et durablement. Et voici Grid CSS !

• Comprendre comment structurer une page web complète de façon claire, logique et moderne, sans bricolage ni empilement approximatif de blocs
• Gagner en confort et en confiance pour créer des mises en page adaptatives qui restent lisibles et maîtrisées sur tous les écrans
• Développer une vraie vision “architecture web” afin d’écrire un CSS plus propre, plus durable et plus facile à faire évoluer

C’est précisément là que Grid CSS entre en scène. Avec Grid, vous ne placez plus les éléments “les uns à côté des autres” par hasard : vous dessinez une vraie grille, claire, lisible, logique. Un peu comme un plan d’architecte avant de construire une maison.

Dans ce chapitre, vous allez découvrir Grid CSS en partant de zéro, sans prérequis complexe, et comprendre pourquoi cette technologie est devenue incontournable pour la mise en page moderne.

Comprendre la philosophie de Grid CSS

Avant d’écrire la moindre ligne de code, il faut comprendre une chose essentielle : Grid CSS travaille en deux dimensions. Contrairement à Flexbox qui gère principalement une ligne ou une colonne, Grid permet de contrôler en même temps les lignes et les colonnes.

Imaginez une feuille quadrillée. Chaque case peut accueillir un élément, et plusieurs cases peuvent être fusionnées pour créer des zones plus grandes. C’est exactement ce que propose Grid CSS, mais pour le web.

Cette approche change profondément la manière de penser la mise en page. Vous ne raisonnez plus en empilement, mais en structure globale. En pratique, cela rend les layouts plus lisibles, plus cohérents et surtout plus faciles à maintenir.

Créer une première grille simple

Pour utiliser Grid CSS, tout commence par un conteneur. C’est lui qui va définir la grille. Les éléments à l’intérieur deviendront automatiquement des éléments de grille.

Voici un exemple HTML très simple :

<div class="grid">
    <div>Bloc 1</div>
    <div>Bloc 2</div>
    <div>Bloc 3</div>
    <div>Bloc 4</div>
</div>

Rien de spécial ici. Toute la magie va se passer en CSS.

.grid {
    display: grid;
}

À ce stade, vous avez activé Grid CSS, mais vous n’avez encore défini aucune structure. Les blocs s’affichent donc les uns sous les autres, comme avant. C’est normal.

Pour créer une vraie grille, vous devez définir des colonnes et des lignes.

Définir des colonnes avec grid-template-columns

La propriété grid-template-columns permet de définir le nombre et la taille des colonnes.

Prenons un exemple très courant : une grille en quatre colonnes de taille égale.

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

Le mot-clé fr signifie “fraction de l’espace disponible”. Ici, chaque colonne occupe exactement la même largeur. Peu importe la taille de l’écran, la grille s’adapte automatiquement.

Dès cet instant, vos quatre blocs se placent côte à côte, chacun dans sa colonne. Sans float, sans position relative, sans calcul compliqué. C’est souvent à ce moment-là que l’on réalise à quel point Grid CSS simplifie la vie.

Ajouter de l’espace entre les éléments

Par défaut, les éléments sont collés les uns aux autres. Pour aérer la mise en page, Grid CSS propose une propriété très pratique : gap.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

Chaque élément est maintenant séparé des autres par un espace régulier. Cela améliore immédiatement la lisibilité visuelle.

La première fois que j’ai découvert gap dans Grid CSS, j’ai repensé à toutes les heures passées à jongler avec des marges négatives. Ce jour-là, j’ai clairement eu l’impression de perdre du temps… mais dans le bon sens.

Créer des lignes avec grid-template-rows

Tout comme pour les colonnes, vous pouvez définir des lignes grâce à grid-template-rows.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 150px;
}

Vous obtenez alors une grille de deux colonnes et deux lignes. Chaque cellule a une taille précise, ce qui est très utile pour des galeries, des tableaux ou des sections bien structurées.

Il est important de comprendre que Grid CSS ne vous oblige pas à définir toutes les lignes. Si le contenu dépasse, de nouvelles lignes sont créées automatiquement. Grid est donc à la fois strict et flexible, ce qui le rend très agréable à utiliser.

Comprendre l’ordre automatique des éléments

Par défaut, Grid CSS place les éléments ligne par ligne, de gauche à droite, puis passe à la ligne suivante. C’est ce que l’on appelle le flux automatique.

Ce comportement est idéal pour débuter, car il correspond à une logique naturelle de lecture. Vous pouvez déjà créer des mises en page complexes sans toucher à l’ordre des éléments.

Et pourtant, vous n’avez encore vu que la surface de Grid CSS.

Dans la suite de ce chapitre, nous verrons comment positionner précisément les éléments dans la grille, créer de vraies zones de page (header, menu, contenu, footer), et comprendre le fonctionnement des lignes numérotées et des zones nommées.
C’est là que Grid CSS commence réellement à révéler toute sa puissance.

Positionner précisément les éléments dans la grille

Jusqu’ici, Grid CSS plaçait les éléments automatiquement. C’est pratique, mais parfois vous voulez décider exactement où chaque bloc doit apparaître. Bonne nouvelle : Grid a été conçu pour ça.

Chaque grille possède des lignes numérotées, aussi bien en colonnes qu’en lignes. Ces lignes commencent à 1 et sont comptées de gauche à droite et de haut en bas.

Prenons une grille simple à trois colonnes et trois lignes.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 200px 100px;
    gap: 20px;
}

Pour positionner un élément précis, vous pouvez utiliser grid-column et grid-row.

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

Ici, l’élément commence à la colonne 1 et se termine à la colonne 3. Autrement dit, il occupe deux colonnes. Ce système est très logique une fois qu’on a compris que l’on travaille avec des lignes, et non des cases.

Comprendre le système des lignes de Grid CSS

C’est un point souvent mal compris par les débutants, donc prenons le temps.

Si vous avez trois colonnes, vous avez en réalité quatre lignes verticales. La première ligne est au bord gauche de la grille, la dernière au bord droit. Lorsque vous écrivez grid-column: 1 / 3, vous demandez à l’élément de s’étendre entre la première et la troisième ligne verticale.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Cette logique peut sembler abstraite au début, mais elle devient rapidement très intuitive. Vous ne pensez plus en pixels, mais en structure.

Utiliser span pour simplifier le placement

Pour éviter de compter les lignes, Grid CSS propose une syntaxe plus lisible avec span.

.item {
    grid-column: 1 / span 2;
}

Ici, vous indiquez simplement que l’élément commence à la colonne 1 et s’étend sur deux colonnes. Le résultat est exactement le même que précédemment, mais souvent plus clair à relire.

Dans un projet réel, cette lisibilité fait une énorme différence lorsque vous revenez sur votre code plusieurs semaines plus tard.

Créer une vraie structure de page avec Grid CSS

C’est maintenant que Grid CSS devient vraiment impressionnant. Vous pouvez créer une structure complète de site sans aucune gymnastique.

Imaginons une page classique avec un en-tête, un menu, un contenu principal et un pied de page.

Voici le HTML :

<div class="layout">
    <header>Header</header>
    <nav>Menu</nav>
    <main>Contenu</main>
    <footer>Footer</footer>
</div>

Et le CSS correspondant :

.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    gap: 20px;
}

Par défaut, les éléments se placent automatiquement, mais ce n’est pas encore très lisible. C’est là que grid-template-areas entre en jeu.

Pour aller plus loin avec la mise en page : Template HTML responsive Grid

Nommer des zones avec grid-template-areas

Cette fonctionnalité est l’une des plus pédagogiques de Grid CSS. Vous pouvez littéralement dessiner votre mise en page en texte.

.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header header"
        "menu content"
        "footer footer";
    gap: 20px;
}

Puis, vous associez chaque élément à sa zone.

header {
    grid-area: header;
}

nav {
    grid-area: menu;
}

main {
    grid-area: content;
}

footer {
    grid-area: footer;
}

À la lecture du code, même sans être développeur, on comprend immédiatement la structure de la page. C’est une des grandes forces de Grid CSS : le code devient presque auto-documenté.

Adapter la grille aux écrans avec Grid CSS

Une mise en page moderne doit s’adapter aux différentes tailles d’écran. Grid CSS facilite énormément ce travail.

Vous pouvez modifier la structure de la grille dans une media query sans toucher au HTML.

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

En quelques lignes, votre mise en page passe d’un affichage desktop à un affichage mobile clair et logique. Aucun déplacement d’éléments compliqué, aucune astuce bancale.

C’est souvent à ce moment-là que l’on réalise que Grid CSS n’est pas seulement puissant, mais aussi très confortable à utiliser.

Gérer les tailles dynamiques avec minmax

Grid CSS sait s’adapter au contenu grâce à la fonction minmax.

grid-template-columns: minmax(150px, 300px) 1fr;

Ici, la première colonne ne descendra jamais en dessous de 150 pixels et ne dépassera jamais 300 pixels. Le reste de l’espace est attribué à la seconde colonne.

Cette approche est idéale pour des menus latéraux ou des barres d’outils.

Créer des grilles flexibles avec repeat et auto-fit

Pour aller encore plus loin, Grid CSS propose des fonctions avancées mais très accessibles.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Cette ligne crée automatiquement autant de colonnes que possible, selon la largeur de l’écran. Chaque colonne fait au minimum 200 pixels et s’adapte ensuite.

C’est une solution parfaite pour des galeries d’images ou des cartes de contenu, sans jamais avoir à calculer le nombre de colonnes.

Quand utiliser Grid CSS plutôt que Flexbox

Il est important de le dire clairement : Grid CSS et Flexbox ne sont pas concurrents, ils sont complémentaires.

Grid CSS est idéal pour structurer une page complète, gérer des zones et organiser des layouts complexes. Flexbox reste excellent pour aligner des éléments à l’intérieur d’un composant, comme un bouton ou une barre de navigation.

Dans la pratique, les développeurs modernes utilisent souvent Grid pour la structure globale et Flexbox pour les détails internes.

Pour en savoir plus : Mise en page Flexbox ou Grid ?

Apprendre Grid CSS, ce n’est pas seulement ajouter une nouvelle compétence à votre boîte à outils. C’est changer votre façon de penser la mise en page. Vous passez d’une logique de bricolage à une logique de construction claire, propre et durable.

Avec Grid CSS, vous gagnez du temps, vous écrivez moins de code, et surtout, vous comprenez mieux ce que vous faites. Cette compréhension est précieuse, car elle vous rend plus confiant et plus créatif dans vos projets.

Si vous prenez le temps de pratiquer, de tester, et parfois même de casser volontairement votre grille pour voir ce qui se passe, Grid CSS deviendra rapidement un réflexe naturel. Et une fois ce cap franchi, la mise en page web ne sera plus jamais une contrainte, mais un vrai terrain de jeu.

Chapitre suivant : Responsive et media query CSS

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr