Récipient de grille dans CSS | Expliqué

Une grille CSS est considérée comme un modèle de mise en page qui partitionne une page Web dans diverses lignes et colonnes pour organiser des éléments. Ces lignes et colonnes aident à aligner facilement les éléments plutôt qu'à utiliser des propriétés de position et de flottement. Une grille positionne des éléments en ce qui concerne la page Web ou d'autres éléments présents sur la page Web. Il se compose de divers composants tels que des conteneurs de grille et des articles de grille. Cependant, nous discuterons de Grid Container dans ce post.

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

Un conteneur de grille est un élément parent qui contient des éléments de grille placés dans les rangées et les colonnes. Aux fins de faire un élément, adoptez le comportement d'un conteneur de grille, définissez sa propriété d'affichage sur une grille ou un réseau en ligne.

Vous pouvez faire en sorte qu'un conteneur de grille se comporte d'une certaine manière en utilisant les propriétés CSS qui lui sont associées. Ces propriétés sont discutées ci-dessous.

Propriétés de récipient de grille

Les propriétés liées à un conteneur de grille sont décrites en détail ci-dessous.

Propriété des colonnes de la grille

Un conteneur de grille est divisé en plusieurs colonnes avec des tailles particulières, par conséquent, pour indiquer le nombre de colonnes et leurs largeurs, la propriété de colonnes de remplaçant de grille est utilisée.

Syntaxe

Grid-Template-Colonnes: Aucun | Auto | Content max | Content min | longueur | Initial | hériter;

Paramètres expliqués
aucun: C'est une valeur par défaut qui génère des colonnes si nécessaire.

auto: Cette valeur évalue la largeur des colonnes en fonction de la taille du conteneur et de la taille du contenu des éléments présente dans une colonne.

contenu maximum: Il ajuste la largeur de la colonne en fonction du plus grand élément de la colonne.

contenu minuscule: Il ajuste la largeur de la colonne en fonction du plus petit élément de la colonne.

longueur: Cette valeur définit la valeur donnée comme largeur des colonnes.

Exemple
Supposons que vous souhaitiez faire quatre colonnes chacune ayant une longueur spécifiée, puis suivez le code ci-dessous.

Html

1
2
3
4
5
6
7
8

Dans le but de fabriquer un système de grille, nous avons créé un élément div avec les «éléments de conteneur» de classe qui agit comme un conteneur de grille, en attendant, les autres éléments div nichés à l'intérieur sont des éléments de grille.

CSS

.récipient
Affichage: grille;
Grid-Template-Colonnes: 50px Auto 70px Auto;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Ici, nous avons créé quatre colonnes chacune ayant la largeur spécifiée dans le code ci-dessus et ayant un écart de 5px chacun. Pendant ce temps, la div a reçu une couleur brun sableux et un rembourrage de 10px.

CSS

.Éléments> div
Color d'arrière-plan: bisque;
rembourrage: 20px;
Texte-aligne: Centre;
taille de police: 35px;

Nous stylisons maintenant simplement nos articles de grille en utilisant les propriétés CSS.

Sortir

La propriété fonctionne correctement.

Propriété des lignes de tempête de grille

Un système de grille se compose également de certaines lignes pour spécifier le nombre de lignes ainsi que leur hauteur, la propriété des lignes de remplaçant de grille est utilisée.

Syntaxe

Grid-Template Rows: Aucun | Auto | Content max | Content min | longueur | Initial | hériter;

Paramètres expliqués
aucun: C'est une valeur par défaut qui génère des lignes en cas de besoin.

auto: Cette valeur évalue la hauteur des lignes en fonction de la taille du conteneur et de la taille du contenu des éléments présente à l'intérieur d'une ligne.

contenu maximum: Il ajuste la hauteur de la ligne en fonction du plus grand élément de la ligne.

contenu minuscule: Il ajuste la hauteur de la ligne en fonction du plus petit article de la ligne.

longueur: Cette valeur définit la valeur donnée comme la hauteur des lignes.

Exemple
Ici, nous allons montrer comment créer des lignes ayant une certaine hauteur.

Html

.récipient
Affichage: grille;
Grid-Template-Colonnes: Auto Auto Auto Auto;
Grid-Template Rows: 200px 100px;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Ici, nous créons deux lignes chacune ayant la hauteur spécifiée dans le code ci-dessus. Nous avons également créé quatre colonnes ayant chacune une largeur automatique.

Sortir

Des lignes ont été générées avec succès.

propriété de justifier

Aux fins d'aligner toute la grille dans un conteneur horizontalement, la propriété Justify-Content est utilisée. N'oubliez pas que, pour que cette propriété fonctionne, la largeur totale de la grille doit être inférieure à celle du conteneur.

Syntaxe

justifier-contenu: Démarrez | Fin | Centre | Space-Between | Space-Assound | Space-Evenly | Étirement | Initial | hériter;

Paramètres expliqués
Démarrer: il positionne la grille au début du conteneur et est la valeur par défaut.

fin: Cela place la grille au dernier récipient.

centre: Cela positionne la grille au milieu du récipient.

l'espace entre: Il ajoute une quantité égale d'espace entre les colonnes.

spatial: Il ajoute un espace égal autour des colonnes.

espace-même: Cela ajoute un espace égal autour et entre les colonnes.

extensible: Il modifie la taille des articles permettant à la grille de couvrir toute la largeur du conteneur.

Exemple
Supposons que vous souhaitiez ajouter de l'espace entre les colonnes à l'intérieur d'un récipient de grille.

CSS

.récipient
Affichage: grille;
justifier-contenu: espace-intermédiaire;
grille-template-colonnes: 40px 40px 40px;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Dans le code ci-dessus, afin de rendre la grille plus petite que le récipient, nous fabriquons trois colonnes de 40px chacune et pour ajouter de l'espace entre ces colonnes, nous utilisons la valeur de l'espace entre la propriété de justification.

Sortir

L'espace a été ajouté entre les colonnes.

Propriété de contenu align

Afin d'aligner la grille entière dans un conteneur verticalement, la propriété de contenu align est utilisée. N'oubliez pas que, pour que cette propriété fonctionne, la hauteur totale de la grille doit être inférieure à celle du conteneur.

Syntaxe

ALIGN-CONTENT: Démarrez | Fin | Centre | Space-Between | Space-Assound | Space-Evenly | Étirement | Initial | hériter;

Paramètres expliqués
commencer: Il positionne les lignes au début du conteneur et est la valeur par défaut.

fin: Cela positionne les lignes à la fin du récipient.

centre: Cela positionne la grille au milieu du récipient.

l'espace entre: Il ajoute une quantité égale d'espace entre les lignes.

spatial: Il ajoute un espace égal autour des lignes.

espace-même: Cela ajoute un espace égal autour et entre les lignes.

extensible: Il modifie la taille des articles permettant à la grille de couvrir toute la hauteur du conteneur.

Exemple
Supposons que vous souhaitiez ajouter de l'espace entre les lignes à l'intérieur d'un conteneur.

CSS

.récipient
Affichage: grille;
hauteur: 350px;
ALIGN-CONTENT: SPACE-BETTOUR;
grille-template-colonnes: Auto Auto Auto;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Pour ajouter de l'espace entre les lignes, nous fournissons d'abord une certaine hauteur à la grille, puis en utilisant la valeur de l'espace entre la propriété de contenu align, nous ajoutons de l'espace entre les lignes. De plus, nous avons créé trois colonnes chacune avec une largeur automatique.

Sortir

L'espace a été ajouté entre les lignes.

Conclusion

Un conteneur de grille est un élément parent qui contient des éléments de grille placés dans les rangées et les colonnes. Dans le but de faire un élément, adoptez le comportement d'un conteneur de grille, affichez-le comme une grille ou un réseau en ligne. Un conteneur de grille peut atteindre certaines caractéristiques grâce à l'utilisation de certaines propriétés CSS qui lui sont associées, telles que Justify-Contin, la grille. Chacune de ces propriétés a été expliquée dans l'article ainsi que des exemples pertinents.