Articles de grille dans CSS | Expliqué

Grid est un modèle de mise en page CSS qui permet à ses utilisateurs d'organiser des éléments apparaissant sur un site Web dans diverses lignes et colonnes. Ce modèle partitionne essentiellement une page Web en sections et aligne des éléments sans l'utilisation de la position et des propriétés flottantes. Il a deux composants, un conteneur et des éléments. Cependant, dans cet article, nous soulignerons ce qu'est un élément de grille et les différentes propriétés qui y sont associées.

Qu'est-ce qu'un élément de grille

Un élément de grille est un élément enfant qui est présent à l'intérieur d'un récipient de grille. À l'intérieur d'un conteneur par défaut, il y a un élément présent pour chaque colonne, dans chaque ligne. Cependant, vous pouvez s'étendre sur les éléments de la grille sur de nombreuses lignes et colonnes.

Il existe de nombreuses propriétés associées à un élément de grille qui définit ses caractéristiques. Nous avons expliqué ces propriétés ci-dessous.

Propriétés de l'élément de grille

Les propriétés liées à un élément de grille sont expliquées en détail ci-dessous.

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
Supposons que vous souhaitiez placer un élément spécifique dans la première ligne du conteneur, voici comment il est fait.

Html

1
2
3
4
5
6

Afin de générer 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é six éléments div à l'intérieur du récipient de grille div ayant une classe différente.

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 attribuons d'abord le plus grand écran DIV A Grid pour en faire un conteneur de grille, nous spécifions qu'il y a trois colonnes dans la grille ayant chacune une largeur de 200px et a un espace de 5px. Le conteneur a également reçu des couleurs d'arrière-plan et un rembourrage. Enfin, nous disons que le troisième élément sera affiché au début de la ligne 1.

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

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 dans 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

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

.un
Grid-Colonne-Start: 2;

Dans le code ci-dessus, nous avons fabriqué quatre colonnes chacune avec une largeur de 200px, puis en utilisant la propriété de démarrage de la grille-colonne, nous plaçons le point 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
Faisons passer un article sur 2 rangées.

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

.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 se terminera l'affichage.

Exemple
Faisons un élément s'étendant 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 grille

Dans le but de définir l'emplacement 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é serme pour les propriétés mentionnées ci-dessous.

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 se terminera l'affichage.

Exemple
Considérez l'exemple ci-dessous.

CSS

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

.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 se déroulera 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 se terminera l'affichage.

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é 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: 2/1 / Span 2 / Span 3;

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 deuxième ligne, la première colonne, et couvrent 2 rangées et 3 colonnes.

Sortir

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

Conclusion

Un élément de grille est un élément enfant qui est présent à l'intérieur d'un récipient de grille. À l'intérieur d'un conteneur par défaut, il y a un élément présent pour chaque colonne, dans chaque ligne. Pour attribuer différentes caractéristiques à un élément de grille, il existe de nombreuses propriétés qui lui sont associées telles que la grille, la colonne de grille, la zone de grille, etc. Ce guide vous apprend ce qu'est un élément de grille et comment vous pouvez faire en sorte que ces éléments se comportent d'une certaine manière en utilisant les propriétés connexes ainsi que des exemples appropriés.