Propriétés de la grille CSS | Expliqué

CSS Grid est un modèle de mise en page qui permet une disposition facile d'éléments apparaissant sur un site Web dans diverses lignes et colonnes. Ce modèle fonctionne en partageant une page Web en sections et en alignement des éléments sans avoir à passer par la peine d'utiliser le positionnement et les flotteurs. Pour utiliser ce modèle, il existe de nombreuses propriétés CSS disponibles que nous avons expliquées en profondeur dans cet article.

Propriétés de la grille CSS

Les propriétés associées au module de mise en page de la grille sont expliquées ci-dessous.

Propriété des colonnes de la grille

Comme nous savons qu'une disposition de grille se compose de nombreuses colonnes qui ont une certaine taille, par conséquent, pour indiquer le nombre de colonnes et leurs largeurs, la propriété de colonnes de gilet 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: Cela 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 dans le code. Voici comment tu fais.

Html

1
2
3
4
5
6
7
8

Dans le code ci-dessus, pour créer un conteneur de grille, nous avons créé un élément div ayant des «éléments de conteneur» de classe et pour placer certains éléments de grille à l'intérieur de ce conteneur, nous avons imbriqué huit éléments div à l'intérieur du récipient de grille div.

CSS

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

Ici, nous définissons l'affichage de l'élément div avec le «conteneur» de classe sur la grille afin d'en faire un récipient de grille. Ensuite, nous fabriquons quatre colonnes avec les trois premières colonnes ayant une longueur de 70px, tandis que la largeur de la dernière colonne est définie sur Auto. Chaque colonne a un espace de 5px et une couleur sandybrown. Enfin, le rembourrage du conteneur est défini sur 10px.

CSS

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

Maintenant, en utilisant certaines propriétés CSS de base, nous stylisons nos articles qui sont présents à l'intérieur du conteneur.

Sortir

Quatre colonnes ayant une certaine largeur ont été créées.

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: Cela définit la valeur donnée comme la hauteur des lignes.

Exemple
Supposons que vous souhaitiez créer deux lignes ayant une hauteur spécifiée, puis suivez le code ci-dessous.

Html

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

Dans le code ci-dessus, nous avons généré deux lignes. La première rangée a une hauteur de 150px, en attendant, la seconde a une hauteur de 250px. En dehors de cela, nous avons également créé quatre colonnes, chacune avec une largeur automatique ayant un écart de 5px.

Sortir

Deux rangées ayant une hauteur spécifiée ont été créées.

Propriété des zones de grille

Aux fins de spécifier le nom des zones d'un système de grille, la propriété du modèle de grille est utilisée. Cela fonctionne d'une manière que vous devez nommer la zone à l'aide de la propriété de la zone de grille, puis de référencer ce nom dans cette propriété.

Syntaxe

Grid-Template-Areas: Aucun | nom de l'article;

Paramètres expliqués
aucun: C'est une valeur par défaut qui ne spécifie aucun nom pour la zone de la grille.

nom de l'article: Cette valeur représente une séquence de la façon dont les lignes et les colonnes dans une grille seront affichées.

Exemple
Voici comment fonctionne cette propriété.

CSS

.un
Grid-Area: Itema;

.récipient
Affichage: grille;
Grid-template-areas: 'itema itema…';
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Dans le code ci-dessus, en utilisant la propriété de la zone de grille, nous attribuons le premier élément de la grille un nom «itema» et référençant ensuite ce nom dans la propriété de la grille-aleas-areas qui spécifie que le premier élément a le nom «itema» et prendra l'espace de deux colonnes sur cinq.

Sortir

La propriété fonctionne correctement.

Propriété de la grille

Il s'agit d'une propriété raccourci pour les propriétés mentionnées ci-dessous.

1. colonne de la grille
2. lignes de tempête de grille
3. grille-template-zones

Syntaxe

Temple de grille: aucun | Grid-Template-Rows / Grid-Template-Colonne | Grid-Template-Areas | Initial | hériter;

Paramètres expliqués
aucun: Il s'agit d'une valeur par défaut qui ne spécifie aucune taille des lignes et des colonnes.

colonne de la grille: Il indique la taille des colonnes.

lignes de tempête de grille: Il définit la taille des lignes.

grille-template-zones: Il indique les noms des zones de grille.

Exemple
Attribuons le nombre et la taille des lignes et des colonnes en même temps.

CSS

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

Dans le code ci-dessus, il a été spécifié qu'il y a deux lignes avec la ligne 1 ayant une hauteur de 200px et trois colonnes avec une largeur automatique pour chaque colonne.

Sortir

La propriété a été mise en œuvre avec succès…

Propriété de démarrage de la grille

Comme son nom l'indique, cette propriété indique dans quelle ligne l'élément de grille commencera à afficher.

Syntaxe

Grid-Row-Start: Auto | ligne de ligne;

Paramètres expliqués
auto: Il s'agit d'une valeur par défaut qui place les éléments en fonction du flux de la grille.

ligne de ligne: Il indique sur quelle ligne l'article commencera à afficher.

Exemple
Considérez l'exemple ci-dessous pour comprendre le fonctionnement de cette propriété.

CSS

.récipient
Affichage: grille;
Grid-template-colonnes: 200px 200px 200px;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

.trois
Grid-Row Start: 1;

Dans le code ci-dessus, nous spécifions d'abord trois colonnes chacune avec une largeur de 200px, puis indiquant que le troisième élément commencera à s'afficher dans la ligne 1.

Sortir

L'article 3 a été placé au début de la ligne 1.

Propriété de démarrage de la colonne de grille

Pour spécifier dans quelle colonne l'élément de grille commencera à afficher, la propriété de démarrage de la grille est utilisée.

Syntaxe

Grid-Colmn-Start: Auto | Span-n | ligne de colonne;

Paramètres expliqués
auto: Il s'agit d'une valeur par défaut qui place les éléments en fonction du flux de la grille.

Span-n: Il indique le nombre de colonnes que l'élément doit s'étendre.

ligne de colonne: Il définit sur quelle colonne l'élément commencera à afficher.

Exemple
Supposons que vous souhaitiez placer un élément de grille spécifique sur une colonne spécifique.

CSS

.un
Grid-Colonne-Start: 2;

Ici, nous utilisons la propriété de démarrage de la colonne de grille et plaçant l'article 1 dans la colonne 2.

Sortir

L'article 1 a été placé avec succès dans la colonne 2.

Propriété de grenaille de grille

Cette propriété indique sur quelle ligne l'élément de grille se terminera l'affichage, ou le numéro de numéro qu'un élément de grille s'étendra.

Syntaxe

Grid-Row-end: Auto | Span-n | ligne de ligne;

Paramètres expliqués
auto: Il s'agit d'une valeur par défaut qui fait que un élément s'étend sur une seule ligne.

Span-n: Il indique le nombre de lignes que l'article doit s'étendre.

ligne de ligne: Il définit sur quelle ligne l'élément se terminera l'affichage.

Exemple
Consultez l'exemple ci-dessous.

.un
Grid-Row-End: Span 2;

Dans le code ci-dessus, nous réalisons l'élément 1 sur 2 lignes en utilisant la propriété Grid-Row End.

Sortir

L'article a été étendu avec deux lignes.

Propriété de la colonne de grille

Cette propriété indique dans quelle colonne l'élément de grille se terminera l'affichage, ou les colonnes numériques qu'un élément de grille s'étendra.

Syntaxe

Grid-Colonne-end: Auto | Span-n | ligne de colonne;

Paramètres expliqués
auto: Il s'agit d'une valeur par défaut qui fait que l'élément couvre une seule colonne uniquement.

Span-n: Il indique le nombre de colonnes que l'élément doit s'étendre.

ligne de colonne: Il définit sur quelle colonne l'élément finira par afficher.

Exemple
Ici, nous faisons un élément sur deux colonnes.

CSS

.un
Grid-Colonne-End: Span 2;

Le code ci-dessus indique que l'élément 1 s'étendra sur deux colonnes.

Sortir

L'article 1 s'étend sur deux colonnes.

propriété de la région de la grille

Cette propriété est utilisée pour définir l'emplacement et la taille d'un élément de grille ou donner un certain nom à un élément de grille qui est ensuite mentionné par la propriété de la grille-template-areas. De plus, il s'agit d'une propriété scolarisée pour les propriétés mentionnées ci-dessous.

1. démarrage de la grille
2. casse-grille
3. grille-colonne de démarrage
4. grille-colonne

Syntaxe

Grid-Area: Row-Start / Column-Start / Row-End / Column-End | nom de l'article;

Paramètres expliqués
démarrage de la grille: Cette valeur indique par où commencer à afficher un élément dans une ligne.

grille-colonne de démarrage: Il indique par où commencer à afficher un élément dans une colonne.

casse-grille: Il décrit où arrêter de montrer des éléments d'affilée, ou combien de lignes à courir.

grille-colonne: Il décrit où arrêter de montrer les éléments dans une colonne, ou combien de colonnes à courir.

nom de l'article: Cette valeur indique le nom de l'élément de la grille.

Exemple
Pour comprendre le fonctionnement de cette propriété, considérez l'exemple suivant.

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

.Sept
Arie de grille: 1/2 / Span 3 / Span 2;

Le code ci-dessus indique qu'il y a quatre colonnes chacune avec une largeur automatique. Pendant ce temps, le septième élément de la grille sera placé dans la première ligne, la deuxième colonne, et couvrent 3 rangées et 2 colonnes.

Sortir

La propriété a été mise en œuvre avec succès.

Propriété de la grille-auto-colonnes

Cette propriété fournit une certaine taille aux colonnes d'une disposition de grille.

Syntaxe

grille-auto-colonnes: Auto | Content max | Content min | longueur;

Paramètres expliqués
auto: Cette valeur par défaut évalue la taille des colonnes en fonction de la taille du conteneur.

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

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

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

Exemple
Considérez l'exemple ci-dessous.

CSS

.un
Arie de grille: 1/1/2/2;

Avant d'utiliser cette propriété, vous devez d'abord attribuer des emplacements à chacun de vos articles de grille à l'aide de la propriété de la zone de grille. Par exemple, dans le code ci-dessus, nous avons spécifié que l'élément 1 sera placé au début de la ligne 1 et de la colonne 1, et à la fin de la ligne 2, et la colonne 2. Maintenant, les emplacements du reste des éléments sont attribués dans un modèle similaire.

CSS

.deux
Arie de grille: 1/2/2/3;

.trois
Arie de grille: 1/3/2/4;

.quatre
Arie de grille: 2/1/3/2;

.cinq
Arie de grille: 2/2/3/3;

.six
Grid-Area: 2/3/3/4;

Le reste des éléments de la grille se voient également attribuer un emplacement à l'aide de la propriété de la zone de grille.

CSS

.récipient
Affichage: grille;
grille-auto-colonnes: 200px;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

En utilisant maintenant la propriété en discussion, la taille des colonnes est définie sur 200px.

Sortir

La propriété a été mise en œuvre.

Propriété de la grille-auto-Rows

Cette propriété fournit une certaine taille aux lignes d'une disposition de grille.

Syntaxe

Grid-Auto-Rows: Auto | Content max | Content min | longueur;

Paramètres expliqués
auto: Cette valeur par défaut évalue la taille des lignes en fonction de la taille du conteneur.

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

contenu minuscule: Il ajuste la taille de la ligne en fonction du moindre article de la ligne.

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

Exemple
Donnons une certaine taille aux lignes du conteneur à l'aide de la propriété en discussion.

CSS

.une aire de grille: 1/1/2/2;
.Deux grille: 1/2/2/3;
.trois grille: 1/3/2/4;
.Quatre Grid-Area: 2/1/3/2;
.Cinq Grid-Area: 2/2/3/3;
.Six Grid-Area: 2/3/3/4;
.récipient
Affichage: grille;
Grid-Auto-Rows: 200px;
Grid-Gap: 5px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Tout comme la propriété Grid-Auto-Columns, nous devons d'abord attribuer des emplacements aux éléments de la grille à l'aide de la propriété de la zone de grille, puis en utilisant la propriété Grid-Auto-Rows La taille des lignes a été définie sur 200px.

Sortir

Chaque ligne a été attribuée avec succès une taille.

Propriété de la grille-flow

Cette propriété gère comment les articles de grille positionnés sur l'auto seront placés à l'intérieur du conteneur.

Syntaxe

Grid-Auto-Flow: Row | Colonne | dense | Rown dense | colonne dense;

Paramètres expliqués
ligne: Cette valeur par défaut place les éléments qui remplissent toutes les lignes.

colonne: Ces valeurs placent des éléments remplissant toutes les colonnes.

dense: Cette valeur remplit les espaces de la grille en plaçant des éléments dans ces espaces.

rangée dense: Il place des articles remplissant toutes les lignes ne laissant aucun trous dans la grille.

colonne dense: Il place des articles remplissant toutes les colonnes ne laissant aucun trous dans la grille.

Exemple
Supposons que vous souhaitiez placer vos articles de grille remplissant chaque colonne.

CSS

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

Dans le code ci-dessus, tout d'abord nous avons créé quatre colonnes chacune avec une largeur automatique, nous avons ensuite généré deux lignes chacune avec une hauteur automatique. Ensuite, nous utilisons la propriété Grid-Auto-Flow pour placer des éléments remplissant chaque colonne.

Sortir

La propriété fonctionne correctement.

propriété de la grille

Dans le but de définir la position et la taille d'un élément de grille, la propriété de la grille est utilisée. De plus, il s'agit d'une propriété scoris pour les propriétés suivantes.

1. démarrage de la grille
2. casse-grille

Syntaxe

Grid-Row: Grid-Row-Start / Grid-Row-End;

Paramètres expliqués
démarrage de la grille: Il indique sur quelle ligne l'article commencera à afficher.

casse-grille: Il définit sur quelle ligne l'article finira par montrer.

Exemple
Voici un exemple de cette propriété.

CSS

.deux
Grid-Row: 1 / Span 2;

Dans le code ci-dessus, nous avons déclaré que l'article 2 sera placé dans la ligne 1 et s'étend sur 2 lignes. Pendant ce temps, la grille a quatre colonnes chacune avec une largeur automatique.

Sortir

La propriété scolarisée a été correctement mise en œuvre.

Propriété de la colonne de grille

Afin de décrire la position et la largeur d'un élément de grille, la propriété de la grille est utilisée. De plus, il s'agit d'une propriété saccourdi pour les propriétés énumérées ici.

1. grille-colonne de démarrage
2. grille-colonne.

Syntaxe

grille-colonne: grille-colonne-démarrage / grille-column-end;

Paramètres expliqués
grille-colonne de démarrage: Il indique sur quelle colonne l'élément commencera à afficher.

grille-colonne: Il définit sur quelle colonne l'élément finira par afficher.

Exemple
Voici un exemple de cette propriété.

CSS

.un
Colonne de grille: 2 / Span 2;

Le code ci-dessus indique que l'article 1 sera placé dans la colonne 2 et s'étendra sur 2 colonnes.

Sortir

La propriété fonctionne correctement.

propriété en ligne

Comme son nom l'indique, la propriété Row-Gap spécifie l'écart entre les lignes de grille.

Syntaxe

Row-Gap: longueur | Normal | Initial | hériter;

Paramètres expliqués
longueur: Il énonce l'écart entre les lignes.

normal: Il définit un écart normal entre les lignes et est une valeur par défaut.

Exemple
Consultez l'exemple ci-dessous pour comprendre cette propriété.

CSS

.récipient
Affichage: grille;
grille-template-colonnes: Auto Auto Auto;
Row-Gap: 60px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Dans le code ci-dessus, nous avons spécifié que l'écart entre chaque ligne sera de 60px.

CSS

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

Ce code est le même que ci-dessus avec la seule différence que pour démontrer correctement le concept d'écart entre les lignes, nous avons ajouté des frontières aux éléments à l'intérieur de la grille.

Sortir

L'écart entre les lignes a été mis en œuvre avec succès.

propriété de colonne

Cette propriété énonce l'écart entre les colonnes de la grille.

Syntaxe

colonne: longueur | Normal | Initial | hériter;

Paramètres expliqués
longueur: Il indique l'écart entre les colonnes.

normal: Il définit un écart normal entre les colonnes et est une valeur par défaut.

Exemple
Ajoutons un écart spécifié entre les colonnes à l'intérieur d'une grille.

CSS

.récipient
Affichage: grille;
grille-template-colonnes: Auto Auto Auto;
Colonne-Gap: 60px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Ici, nous avons ajouté un écart de 60px entre chaque colonne.

Sortir

Un écart entre les colonnes a été ajouté.

propriété d'écart

Pour spécifier l'écart entre les lignes et les colonnes en même temps, la propriété GAP est utilisée. C'est une propriété scoris.

1. se raminer
2. chanqueur

Syntaxe

GAP: Row-Gap Column-Gap;

Paramètres expliqués
se raminer: Il ajoute un écart entre les lignes.

chanqueur: Il ajoute un écart entre les colonnes.

Exemple
Faisons un peu d'écart entre les lignes et les colonnes en même temps.

CSS

.récipient
Affichage: grille;
grille-template-colonnes: Auto Auto Auto;
Écart: 65px;
Color en arrière-plan: Sandybrown;
rembourrage: 10px;

Dans le code ci-dessus, nous avons spécifié qu'il y aura un écart de 65px entre chaque ligne et chaque colonne.

Sortir

La propriété fonctionne correctement.

Conclusion

CSS Grid est un modèle de mise en page qui permet une disposition facile d'éléments apparaissant sur un site Web dans diverses lignes et colonnes. Il existe de nombreuses propriétés qui y sont associées, telles que, des colonnes de remplaçant de grille, des lignes de tempête de grille, une colonne de grille, une ligne de grille, une zone de grille, etc. Chacune de ces propriétés a un objectif différent que nous avons expliqué dans ce post ainsi que des exemples pertinents.