Propriétés du conteneur de grille dans CSS | Expliqué

CSS fournit un modèle de mise en page de grille qui permet de créer une disposition bidimensionnelle sur un site Web. Le comportement bidimensionnel de la grille CSS permet l'alignement des éléments de la grille en lignes et colonnes. Les propriétés du conteneur de grille CSS peuvent être utilisées pour atteindre différentes fonctionnalités telles que l'alignement du contenu, l'alignement des éléments, etc.

Cet article fournira un guide complet pour le conteneur de grille et à cet égard, il couvrira les concepts fondamentaux suivants du conteneur de grille:

• Qu'est-ce qu'un récipient de grille dans CSS
• La propriété d'affichage
• Propriétés de récipient de grille dans CSS
• Comment utiliser les propriétés du conteneur de grille dans CSS

Alors, commençons!

Qu'est-ce qu'un récipient de grille?

Un conteneur de grille est une boîte / conteneur qui contient des éléments de grille et peut placer ces éléments dans les lignes et les colonnes.

La propriété d'affichage

Pour créer un conteneur de grille, nous devons utiliser la propriété d'affichage et définir sa valeur comme un réseau en ligne ou une grille. L'extrait ci-dessous montre la syntaxe de base de la propriété d'affichage:

Affichage: valeur;

Exemple 1

Dans l'extrait de code ci-dessous, nous créerons un conteneur de grille et dans le conteneur, nous déclarerons cinq éléments enfants:

Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément
Sixième élément

Les classes de style respectives pour le conteneur de grille et les articles de grille seront comme ceci:

L'extrait de code ci-dessus affichera la sortie suivante:

La sortie vérifie que les éléments de conteneur de grille et de grille sont stylés en fonction de leurs classes de style respectives.

Propriétés de récipient de grille dans CSS

Le tableau ci-dessous fournira un bref guide pour les propriétés du conteneur de grille:

Propriétés	Description
Grid-Template-Colonnes et Grid-Template Rows	Déterminez la taille des colonnes et des lignes dans un conteneur de grille et ces propriétés peuvent prendre une liste des valeurs séparées de l'espace E.g. taille de tampon, nom de ligne.
grille-template-zones	Il détermine comment afficher les lignes et les colonnes en utilisant des éléments de grille nommés.
remplaçant de grille	Il s'agit d'une propriété scolarisée utilisée pour atteindre les fonctionnalités de trois propriétés, i.e., Grid-template-colonnes, ross-template et grille-zones.
row-gap et colonne	Ces propriétés déterminent l'écart entre les lignes de grille et les colonnes de grille respectivement.
grille-colonne et grille-row-gap	Ces propriétés sont utilisées pour spécifier la taille de l'écart entre les colonnes de la grille et les lignes de grille, respectivement.
grille	Il s'agit d'une propriété scolarisée utilisée pour atteindre les fonctionnalités de deux propriétés I.e. grille-colonne et grille-row-gap
justifier	Il aligne les éléments de la grille le long de l'axe des lignes / en ligne.
align-items	Il aligne les éléments de la grille le long des colonnes / axe en ligne.
lieux de place	Il s'agit d'une propriété raccourci pour les propriétés des éléments d'alignement et de justifier, qui définit les deux dans une seule déclaration.
justifier	Il aligne la grille le long des lignes / axe en ligne
contenir l'alignement	Il aligne la grille le long des colonnes / axe de bloc
contenu de place	Il s'agit d'une propriété scoris.
grille-auto-colonnes	Il détermine la taille par défaut des colonnes.
grille-auto-rangs	Il définit la taille par défaut des lignes.
grille-flow	Il détermine comment les articles placés automatiquement sont ajoutés dans la grille CSS.
grille	Il s'agit d'une propriété raccourci pour plusieurs propriétés de grille (i.e. Grid-Template Rows, Grid-Template-Colonnes, Grid-Template-Areas, Grid-Auto-Rows, Grid-Auto-Colonnes et le Grid-Auto-Flow).

Comment utiliser les propriétés du conteneur de grille dans CSS

Maintenant, nous allons pratiquement mettre en œuvre certaines des propriétés décrites ci-dessus pour une compréhension profonde.

Les propriétés de lignes de conduite et de lignes de grille de grille

Ces propriétés peuvent prendre plusieurs valeurs séparées d'espace telles que l'auto, le pourcentage, etc.

Modifions un peu d'exemple1; Dans l'exemple ci-dessous, tout le code restera le même, sauf la propriété de colonne de la grille.

Exemple 2

Dans cet exemple, nous ajouterons une propriété de colonnes de remplaçant de grille pour spécifier la taille des colonnes de notre choix:

grille-template-colonnes: 1FR Auto Auto;

De l'extrait ci-dessus, nous pouvons observer que la largeur de la première colonne est «1fr», et la largeur des deux colonnes restantes est "auto".

Par conséquent, la largeur de la première colonne sera différente des deux colonnes restantes:

De même, nous pouvons utiliser le lignes de tempête de grille propriété pour spécifier la taille des lignes.

La propriété de contenu align

Pour aligner la grille le long de l'axe ou des colonnes verticales / blocs, nous pouvons utiliser la propriété de contenu align, et il peut prendre différentes valeurs pour effectuer différentes fonctionnalités telles que «Centre», «Start», «End», «Space-Evenly», etc.

Exemple 3

Dans cet exemple, nous utiliserons la propriété d'alignement et définirons sa valeur comme «fin» pour définir / aligner les lignes à la fin du conteneur. L'extrait de code ci-dessous montre le code de la classe de conteneurs tandis que la classe d'élément et le code HTML resteront les mêmes que dans les exemples précédents:

.classe de conteneur
Affichage: grille;
grille-template-colonnes: Auto Auto Auto;
hauteur: 300px;
ALIGN-CONTENT: FIN;
Color en arrière-plan: vert;
rembourrage: 10px;

La propriété de contenu align aura l'impact suivant lorsque sa valeur sera définie comme "fin":

La sortie authentifie le fonctionnement de la propriété de contenu align.

De même, nous pouvons mettre en œuvre le reste des propriétés du conteneur de grille pour bénéficier des différentes fonctionnalités en fonction de notre désir et de nos nécessités.

Conclusion

Un conteneur de grille est une boîte / conteneur qui contient des éléments de grille et peut placer ces éléments dans les lignes et les colonnes. Pour créer un conteneur de grille, nous devons utiliser la propriété d'affichage et définir sa valeur comme un réseau en ligne ou une grille. De plus, une large gamme de propriétés de grille est disponible en CSS pour concevoir les pages Web, telles que les éléments de justification des éléments, les éléments de justification, le contenu align, le grille-flux, le grille, etc. Cet article a expliqué divers aspects des propriétés des conteneurs de grille et les a mis en œuvre pratiquement.