Apprenez à utiliser les grilles CSS pour créer facilement des mises en page complexes.

Le positionnement d'éléments sur une page Web peut être très compliqué lorsque l'on travaille avec des mises en page complexes. C'est là que la grille CSS s'avère utile. Il s'agit d'un système de mise en page conçu pour simplifier le processus de création de mises en page complexes.

Comment cela vous aide-t-il? Contrairement aux méthodes de mise en page traditionnelles qui vous permettent uniquement de positionner les éléments en lignes ou en colonnes, la grille CSS vous offre le meilleur des deux mondes: une approche 2D utilisant des lignes et des colonnes.

Conteneurs et éléments de grille

Vous pouvez appliquer les propriétés de grille CSS à deux principaux types d'éléments: les parents et les enfants. Lorsque vous définissez la propriété d'affichage sur "grid" pour un élément parent, cet élément est transformé en un conteneur de grille. Tout élément enfant de ce conteneur de grille devient un élément de grille, héritant des propriétés de grille appliquées.

Voici comment cela est représenté :

Un élément de grille peut également devenir un conteneur de grille. Vous pouvez désormais désigner la mise en page comme une grille imbriquée, une grille dans une grille. Le conteneur de grille principal est désormais appelé grille externe, tandis que le conteneur d'élément devenu grille devient une grille interne.

Chacune de ces grilles fonctionne indépendamment de l'autre, ce qui signifie que les propriétés définies pour une grille interne n'affectent pas la disposition de la grille externe, et vice versa.

Voici à quoi cela ressemble :

Maîtriser la relation entre les conteneurs de grille et les éléments est essentiel pour construire des mises en page bidimensionnelles effectivement.

Gardez à l’esprit qu’il existe des propriétés de grille pour les conteneurs de grille, tandis que d’autres sont destinées aux éléments de grille.

Lignes de quadrillage et pistes

Avant de commencer à utiliser la grille CSS, vous devez connaître deux termes clés :

  1. Lignes de quadrillage: Les lignes de grille font référence aux lignes horizontales et verticales qui forment la grille dans une disposition de grille CSS. Ils spécifient les points de début et de fin des lignes et des colonnes, aidant ainsi à organiser où vont les choses sur la grille. Ces lignes sont comme les bords des boîtes; ils ont des numéros qui vous aident à référencer les éléments lors du positionnement. Ici, la ligne pointillée rouge les représente:
  2. Pistes de grille: Ce sont les espaces entre les lignes de grille qui définissent les lignes et les colonnes. Ils sont comme les éléments constitutifs de la disposition en grille. Dans l'image ci-dessus, la zone colorée à l'intérieur de chaque élément représente la piste de la grille.

Considérez les lignes et les pistes du quadrillage comme les éléments constitutifs d'une disposition en grille, comme les lignes sur une feuille de papier millimétré. Lorsqu’une ligne de quadrillage horizontale croise une ligne de quadrillage verticale, elle forme une cellule en forme de boîte. Ces cellules agissent comme des conteneurs dans lesquels vous pouvez placer vos éléments de grille.

Propriétés du conteneur de grille CSS

Ce sont des propriétés que vous pouvez appliquer au conteneur de grille pour organiser la mise en page et faciliter le positionnement des éléments à l'intérieur de celui-ci. Comme mentionné précédemment, l'un d'eux est la propriété d'affichage définie sur grille. En voici d'autres :

Modèle de grille

Cette propriété définit la taille des lignes et des colonnes. Vous pouvez dimensionner ces propriétés en utilisant des pixels, des pourcentages ou l'unité fractionnaire (fr). Vous pouvez également utiliser des mots-clés tels que auto, min max(), et répéter() pour améliorer la flexibilité.

  • lignes-de-modèle-de-grille: Définit la hauteur des lignes.
  • colonnes-modèle-de-grille: Définit les largeurs de colonnes.

Voici quelques exemples:

Utiliser des pixels:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Utiliser des pourcentages:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Utiliser fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Utilisation des mots-clés auto et minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Utilisation de repeat() pour un dimensionnement cohérent:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Zones de placement automatique et de modèle de grille

Placement automatique: Le placement automatique revient à laisser la grille décider où placer les éléments. Si vous ne spécifiez pas les positions exactes, la grille placera automatiquement les éléments dans l'ordre dans lequel ils apparaissent dans le balisage. Ceci est utile lorsque vous avez de nombreux éléments et que vous souhaitez qu’ils remplissent la grille de manière uniforme.

Zones de modèle de grille: Considérez les zones de modèle de grille comme la création d'une mise en page utilisant des zones nommées. C'est comme nommer des pièces sur un plan d'étage. Vous pouvez faire référence à ces noms de zones lors du positionnement des éléments de la grille. Par exemple:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Cette disposition ressemble à une grille avec trois colonnes et quatre lignes. Il y a deux lignes pour la zone de contenu principale. Les zones étiquetées incluent « en-tête », « barre latérale », « contenu » et « pied de page ». Dans les sections suivantes, vous apprendrez comment utiliser ces étiquettes de zone dans les propriétés de chaque élément de grille.

Alignement dans la grille CSS

Vous pouvez utiliser les propriétés d'alignement pour contrôler le positionnement des éléments de grille dans leurs cellules de grille. Les propriétés sont :

  • justifier les éléments: Contrôle l’alignement horizontal des éléments dans leur cellule de grille.
    • Valeurs: début, fin, centre et étirement.
  • aligner les éléments: Contrôle l’alignement vertical des éléments dans leur cellule de grille.
    • Valeurs: début, fin, centre et étirement.
  • justifier-contenu: Aligne toute la grille du conteneur le long de l'axe horizontal.
    • Valeurs: début, fin, centre, étirement, espace entre, espace autour et espace uniformément.
  • aligner le contenu: Aligne toute la grille du conteneur le long de l'axe vertical.
    • Valeurs: début, fin, centre, étirement, espace entre, espace autour et espace uniformément.

Voici un exemple :

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Dans cet exemple, les éléments seront centrés horizontalement et verticalement dans leurs cellules. L'espace sera réparti uniformément entre les colonnes de la grille entière et la grille sera centrée verticalement dans le conteneur.

Écart de grille

L'espacement de la grille fait référence à l'espace entre les lignes et les colonnes dans une disposition en grille. Cela aide à créer une séparation visuelle et ajoute de l'espace entre les éléments de la grille.

Le écart de grille La propriété vous permet de définir l’écart entre les lignes et les colonnes. Vous pouvez utiliser différentes unités pour le définir, telles que les pixels (px), les pourcentages (%), les unités em (em), etc.

.grid-container {
grid-gap: 20px;
}

Dans cet exemple, le conteneur de grille comporte deux colonnes espacées de 20 pixels. Cet espacement sépare visuellement les colonnes et améliore la disposition.

Propriétés des éléments de grille CSS

Voici quelques propriétés clés qui contrôlent le comportement des éléments de grille individuels dans une disposition de grille CSS, ainsi que des exemples :

début de ligne de grille et fin de ligne de grille:

  • Définit les lignes de début et de fin d'un élément.
  • Les valeurs peuvent être des numéros de ligne, « span n » ou « auto ». 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Ce code place Élément de grille 1 de la ligne de la deuxième rangée à la ligne de la quatrième rangée.

début de colonne de grille et fin de colonne de grille:

  • Définit les lignes de colonnes de début et de fin d'un élément.
  • Les valeurs peuvent être des numéros de ligne, « span n » ou « auto ». 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Ce code place Élément de grille 2 de la première ligne de colonne à la troisième ligne de colonne.

zone de grille:

  • Spécifie la taille et la position d'un élément de grille dans la grille en faisant référence aux lignes de grille nommées dans zones de modèle de grille.
  • Comme mentionné précédemment, les noms de zones prédéfinis sont déjà utilisés avec le zones de modèle de grille propriété. Voici un exemple de la façon de l'utiliser avec zone de grille. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Voici le résultat :

se justifier:

  • Aligne les éléments individuels horizontalement dans sa cellule.
  • Les valeurs peuvent être début, fin, centre et étirement. 
.grid-item-5 {
justify-self: center;
}

Ce code centre horizontalement le Élément de grille 5 au sein de sa cellule.

s'aligner:

  • Alignez les éléments individuels verticalement dans sa cellule.
  • Les valeurs peuvent être début, fin, centre et étirement. 
.grid-item-1 {
align-self: end;
}

Ce code s'aligne Élément de grille 1 au fond de sa cellule.

N'hésitez pas à combiner et à personnaliser ces propriétés pour créer la mise en page et l'apparence souhaitée pour chaque élément de grille de votre grille CSS.

Création de mises en page réactives à l'aide de grilles CSS

Utiliser des grilles CSS pour créer des mises en page réactives Il est important de garantir que votre page Web s’adapte parfaitement à différentes tailles d’écran et appareils. Vous pouvez appliquer ces méthodes :

  • Requêtes multimédias: Vous pouvez utiliser des requêtes multimédias pour appliquer différentes dispositions de grille en fonction de la taille de l'écran. Par exemple, vous devrez peut-être réorganiser les éléments de la grille ou ajuster la largeur des colonnes pour des écrans plus petits.
  • Unités flexibles: utilisez des unités relatives telles que les pourcentages et fr pour permettre aux éléments de la grille et aux colonnes de s'ajuster proportionnellement à l'espace disponible.
  • min max(): Utilisez le min max() fonction pour spécifier une plage de tailles pour les colonnes ou les lignes de la grille. Cela garantit que les éléments n’apparaîtront ni trop petits ni trop grands sur différents écrans.

N'oubliez pas d'ajuster les colonnes et autres éléments tels que les espaces entre les éléments de la grille, la taille des polices et les marges. Il garantit une mise en page cohérente et bien conçue qui fonctionne bien sur différents appareils.

Explorez les possibilités de la disposition en grille CSS

Adopter la flexibilité et la puissance de la grille CSS vous permettra de créer des mises en page qui non seulement sont superbes, mais qui s'adaptent également de manière transparente aux exigences de la conception Web moderne. Alors, plongez dans le monde des grilles, explorez les possibilités et améliorez vos compétences en développement Web.

Lorsque vous explorez les systèmes de mise en page, vous souhaiterez peut-être comparer d'autres méthodes de mise en page avec les grilles CSS. Vous pouvez le faire avec le module CSS Flexbox. Cela vous aidera à apprendre à décider lorsque vous travaillez sur un projet.