Introduction à la disposition en grille CSS avec exemples

Ce que vous allez créer

Dans ce tutoriel, je couvrirai les bases de la présentation de la grille CSS avec des exemples de scénarios. CSS Grid est maintenant pris en charge par presque tous les navigateurs modernes et est prêt à être utilisé en production. Contrairement à d'autres méthodes de mise en forme telles que flexbox, la disposition de la grille vous donne deux degrés de liberté, ce qui la rend si polyvalente que le positionnement des éléments est un jeu d'enfant..

Structure HTML pour la présentation en grille CSS

Pour utiliser la présentation CSS Grid, vos éléments HTML doivent avoir une structure spécifique..

Vous devez envelopper les éléments que vous souhaitez contrôler dans un conteneur parent DIV.

Ajoutons du style à nos DIV pour pouvoir les distinguer facilement.

En outre, définissez le affichage: grille dans ton emballage DIV pour pouvoir commencer à utiliser la grille.

.wrapper> div background-color: orange; bordure: 1px noir solide;  .wrapper> div: nth-child (impair) background-color: indianred;  .wrapper display: grid

À partir de ce moment, tout le style ira dans le emballage DIV. Si nous souhaitons un jour contrôler les DIVs enfant, nous ajouterons des règles de style spécifiques à la grille pour la DIV spécifique..

Règles sur les DIV parents

Les premières choses à apprendre sur la disposition de la grille sont Grille-modèle-colonnes et grid-template-rows. Ces deux règles contrôlent fondamentalement la forme de votre grille.

La valeur de ces règles peut être une longueur, un pourcentage ou une fraction de l'espace libre dans la grille. Vous pouvez également définir n'importe quelle valeur sur auto, qui remplit l'espace restant.

Voyons quelques exemples ci-dessous.

Grid-template-columns & Grid-template-rows

Grille-modèle-colonnes

.wrapper display: grid; grid-template-columns: 100px 100px 100px

.wrapper display: grid; grid-template-columns: 100px auto 100px

.wrapper display: grid; Grille-modèle-colonnes: 1fr 1fr 1fr 1fr;

Grille-modèle-colonnes & Grille-modèle-lignes

Commençons par construire une vraie grille dans laquelle nous contrôlons les colonnes et les lignes.

.wrapper display: grid; Grille-modèle-colonnes: 1fr 1fr; grid-template-rows: 50px 50px;

.wrapper display: grid; grid-template-columns: 100px 20px 250px; grid-template-rows: 150px 40px;

Ici, je viens d'ajouter deux autres DIVs au code HTML pour le même CSS.

Répéter un motif de modèle de grille

Si vous avez un motif répétitif pour modèle de grille,vous pouvez simplement utiliser répéter et lui dire combien de fois répéter le même motif.

Par exemple, supposons que vous avez 12 éléments et que vous souhaitez les disposer horizontalement avec une largeur égale. Tu pourrais répéter 1fr 12 fois à l'intérieur Grille-modèle-colonnes, ce qui n'est pas efficace. Donc, au lieu de cela, vous pouvez utiliser répéter (12, 1fr).

.wrapper display: grid; grid-template-columns: répéter (12, 1fr)

De même, vous pouvez répéter un motif.

.wrapper display: grid; Grille-modèle-colonnes: répéter (4, 1fr 5fr 10fr);

Grille-auto-colonnes & Grille-auto-lignes

Cette règle vous aide à définir la largeur et la hauteur des cellules de la grille..

Si vous ne définissez pas cette règle, vos lignes et colonnes de grille se développeront avec le contenu..

.wrapper display: grid; Grille-modèle-colonnes: répéter (4, 1fr); grid-auto-rows: 100px;

.wrapper display: grid; Grille-modèle-colonnes: répéter (4, 1fr); grid-auto-rows: 20px 80px;

Une fonctionnalité intéressante à utiliser avec grille automatique la règle est la min max une fonction.

Vous définissez simplement la taille minimale en tant que premier paramètre et la taille maximale en tant que second paramètre. Si vous définissez auto pour le second paramètre, vous obtenez une taille de cellule sensible.

.wrapper display: grid; Grille-modèle-colonnes: répéter (4, 1fr); grid-auto-rows: minmax (50px, auto)

Ci-dessous, vous voyez deux contenus DIV différents avec les mêmes règles CSS.

Grid-gap

Comme son nom l'indique, cette règle crée un espace entre les cellules de la grille.

Si tu utilises intervalle de grille: 5px, vous obtenez un espace de 5 pixels entre chaque cellule. Sinon, vous pouvez uniquement définir les espaces entre les lignes ou les colonnes, avec gap-row-gap: 5px et grid-column-gap: 5px respectivement.

.wrapper display: grid; Grille-modèle-colonnes: répéter (4, 1fr); grid-auto-rows: minmax (50px, auto); intervalle de grille: 5px;

Règles relatives aux DIV enfants

Jusqu'ici, nous nous sommes concentrés uniquement sur la forme de la grille et les éléments ne faisaient que couler dans la grille. Maintenant, nous allons apprendre à contrôler chaque élément individuellement.

Pour positionner les éléments, nous utilisons les lignes de la grille comme référence. Ci-dessous, vous voyez les lignes et les colonnes en noir et orange respectivement pour une grille 2x4..

Nous allons utiliser le colonne de grille et rangée de la grille règles avec numéros de ligne pour positionner les éléments.

Par exemple, si nous fixons grille-colonne: 1/3 pour le premier enfant div, il utilisera les deux premières cellules de la grille.

Considérez le HTML et CSS ci-dessous:

.wrapper display: grid; Grille-modèle-colonnes: répéter (4, 1fr); grid-auto-rows: 100px; intervalle de grille: 5px;

Nous avons quatre colonnes de taille égale et huit éléments dans le emballage DIV.

 .div1 grille-colonne: 1/3;

 .div1 grille-colonne: 1/3; rangée de grille: 1/3;

Vous pouvez également combiner ces deux règles en une seule règle., zone de la grille: rowStart / columnStart / rowEnd / columnEnd.

 .div1 aire de la grille: 2/2/3/4;

Comme illustré dans l'exemple ci-dessus, les éléments ne sont pas liés à la structure HTML. Notez comment le premier élément est repositionné avec le surface de la grille règle.

Zone de grille et zones de modèle de grille

Vous pouvez nommer chaque élément enfant et utiliser ces noms pour créer votre grille. C'est vraiment puissant et cela rend la mise en page plus intuitive.

Nous définissons donc une DIV pour chaque élément que nous prévoyons de placer dans notre système de grille..

Je prévois d'avoir un en-tête, leftColumn, rightColumn, middleTop, middleBottom et un pied de page.

Donc, dans mon HTML, j'ai besoin de tant de DIVs enfants. Les noms de classe peuvent être n'importe quoi.

 Entête
 LeftCol
 RightCol
 midTop
 midbottom
 Bas de page

Puis, dans mon CSS, je mets le surface de la grille des noms. Ces noms peuvent être n'importe quoi; ils ne sont pas censés correspondre aux noms de classe.

.header grid-area: header; couleur de fond: LightSeaGreen;  .leftCol grid-area: leftCol; couleur de fond: orange;  .rightCol grid-area: rightCol; couleur de fond: bleu clair;  .midTop grid-area: midTop; couleur de fond: gris clair;  .midBottom grid-area: midBottom; couleur de fond: rose;  .footer grid-area: footer; couleur de fond: vert clair;

Puis, dans mon emballage DIV, j'utilise le grille-template-zones règle de disposer ces éléments en se référant à leurs noms définis.

Notez que j'ai une grille 4x4.

.wrapper display: grid; Grille-modèle-colonnes: 1fr 4fr 4fr 1fr; grid-template-rows: 50px 100px 100px 30px; grid-template-areas: "en-tête en-tête en-tête" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "pied de page pied de page pied de page"; intervalle de grille: 5px;

Si, par exemple, je veux que le pied de page ne prenne que deux colonnes et soit centré, je remplace simplement la première et la dernière apparence de bas de page avec un point (.) dans grille-template-zones.

.wrapper display: grid; Grille-modèle-colonnes: 1fr 4fr 4fr 1fr; grid-template-rows: 50px 100px 100px 30px; grid-template-areas: "header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" ". bas de page."; intervalle de grille: 5px;

Conclusion

CSS Grid a des tonnes de règles, et je n'ai couvert que les plus utiles de ce tutoriel. Vous pouvez toujours consulter MDN Web Docs ou toute autre source pour obtenir la liste complète des propriétés et des fonctions de la grille..

Code