CSS Grid : Jouer avec la mise en page Web

Peut-on faire mieux que le css flex pour jongler avec les mises en page responsive ? avez-vous essayé le css grid ?

L’arrivée du css flex était déjà une révolution dans la gestion des sites responsives, le css grid va vous permettre d’aller plus loin encore .

Exemple de ce que l’on peut faire avec du css grid

Ce que voit les bots : D’abord les textes (ici h1 h2 puis paragraphes) puis les images

L’affichage mobile :

L’affichage desktop :

Testez le CSS Grid ci-dessous.

Passez votre navigateur en mode simulateur mobile via l’inspecteur de code et observez les élements se réajuster.

CSS grid layout

CSS complexe et responsive

CSS Grid est sans aucun doute l’une des plus grandes avancées dans le développement web ces dernières années. Il simplifie la création de mises en page complexes, tout en offrant un niveau de contrôle et de flexibilité sans précédent. Que vous construisiez un site web simple ou une interface utilisateur sophistiquée, CSS Grid devrait être un outil essentiel dans votre arsenal de développement. Grâce à ses nombreuses fonctionnalités, il vous permet de repousser les limites de la conception web moderne tout en assurant une expérience utilisateur optimale sur tous les appareils.

Avec l’ajout de générateurs de grilles en ligne, même les développeurs moins expérimentés peuvent rapidement concevoir des grilles complexes, transformant ainsi la manière dont les interfaces utilisateur sont construites. Que vous soyez un développeur chevronné ou débutant, CSS Grid et les outils associés devraient être au cœur de votre approche pour créer des sites modernes et réactifs.

Mise en Page Bidimensionnelle

La principale innovation de CSS Grid est la possibilité de gérer les mises en page sur deux dimensions : lignes et colonnes. Contrairement à Flexbox, qui se concentre sur une seule dimension (ligne ou colonne), CSS Grid permet d’agencer les éléments en un véritable tableau, offrant ainsi un contrôle total sur la position des éléments.

Exemple de base :

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: auto;
}

Dans cet exemple, un conteneur avec trois colonnes de largeurs spécifiques est créé. Les éléments enfants se positionnent automatiquement dans les cellules définies par la grille.

Contrôle Précis du Placement des Éléments via le CSS Grid

CSS Grid permet de placer précisément chaque élément dans la grille en utilisant les propriétés grid-column et grid-row. Cela signifie que vous pouvez facilement organiser vos éléments sur la page sans modifier leur ordre dans le code HTML.

Exemple :

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

Ici, l’élément div1 occupe les colonnes 2 à 4 et les lignes 1 à 3, ce qui est extrêmement utile pour créer des mises en page asymétriques ou complexes.

Alignement et Justification Simples

Avec CSS Grid, l’alignement des éléments dans les cellules est simplifié grâce aux propriétés justify-items, align-items, justify-content, et align-content. Ces propriétés permettent d’aligner les éléments aussi bien horizontalement que verticalement, en fonction de leurs conteneurs et de la grille.

Exemple :

.container {
    display: grid;
    justify-items: center;
    align-items: center;
}

Dans cet exemple, tous les éléments du conteneur seront centrés horizontalement et verticalement dans leurs cellules respectives.

Création de Mises en Page Réactives

CSS Grid facilite la création de mises en page réactives, qui s’adaptent automatiquement à la taille de l’écran. Grâce à des fonctionnalités comme les unités de mesure fr (fraction) et les media queries, il est possible de créer des grilles dynamiques et adaptatives comme l’exemple en début de l’article.

Exemple :

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

Ici, les colonnes de la grille s’ajustent automatiquement pour remplir l’espace disponible, chaque colonne ayant une largeur minimale de 200px et prenant le reste de l’espace disponible (1fr).

Fonctionnalités Avancées : Grilles Imbriquées et Noms de Lignes

CSS Grid permet également des fonctionnalités avancées comme les grilles imbriquées, où une grille peut être définie à l’intérieur d’un élément d’une autre grille, et les noms de lignes, qui facilitent le positionnement d’éléments par référence à des noms spécifiques plutôt qu’à des numéros de lignes.

Exemple de noms de lignes :

.container {
    display: grid;
    grid-template-columns: [start] 1fr [middle] 2fr [end];
}
.item {
    grid-column: start / middle;
}

Ici, les noms start, middle, et end sont utilisés pour définir et manipuler les zones de la grille.

Générateur de Grilles en Ligne

Essayer de générer seul son css à partir de tous les paramètres existants ( CSS Grid Layout Module ) peut paraitre complexe, heureusement il existe en ligne des générateurs de CSS Grid très pratique, ils vous permettent de créer visuellement des grilles et de générer automatiquement le code CSS correspondant.