Propriétés des éléments de grille dans CSS | Expliqué
Cet article présentera un aperçu approfondi des propriétés des éléments de la grille CSS et il sera organisé comme suit:
- Que sont les articles de la grille?
- Propriétés des articles de grille dans CSS
- Syntaxe des propriétés des éléments de grille CSS
- Comment utiliser les propriétés des éléments de grille
Alors, commençons!
Que sont les articles de la grille?
Les articles dans le conteneur CSS Grid sont appelés articles de grille ou éléments enfants.
Propriétés des articles de grille dans CSS
CSS fournit de nombreuses propriétés pour travailler avec les éléments de la grille CSS. Le tableau ci-dessous illustre différentes propriétés des éléments de la grille:
| Propriétés | Description |
|---|---|
| Grid-Colonne-Start et Grid-Row-Start | Ces propriétés déterminent l'emplacement des éléments de la grille en spécifiant où démarrer l'élément. |
| Grid-Colonne et Grid-Row-end | Ces propriétés déterminent l'emplacement des éléments de la grille en spécifiant où mettre fin à l'élément de la grille. |
| colonne de grille | Il s'agit d'une propriété raccourci pour les propriétés de la colonne de colonne et de la grille. |
| rangée de grille | Il s'agit d'une propriété raccourci qui est utilisée pour réaliser les fonctionnalités du start de la grille et du grenage de grille. |
| surface de grille | Il spécifie le nom de l'élément de grille, ou il peut être utilisé pour atteindre les fonctionnalités de plusieurs propriétés I.e. Grid-Row-Start, Grid-Colonne-Start, Grid-Row-end et Grid-Colnmn-End. |
| se justifier | Il aligne un élément de grille dans une cellule le long de l'axe de ligne / en ligne. |
| s'aligner | Il aligne un élément de grille dans une cellule le long de l'axe de colonne / bloc. |
| place-soi | C'est une propriété scoris pour deux propriétés I.e. s'aligner et se justifier. |
Syntaxe
L'extrait ci-dessous vous aidera à comprendre la syntaxe de base des propriétés de l'élément de grille:
nom de propriété: valeur (s);Le nom de la propriété sera suivi par le côlon «:» et ensuite les valeurs seront spécifiées de l'autre côté du côlon et ces valeurs décideront quelles fonctionnalités seront effectuées par l'élément de grille.
Comment utiliser les propriétés des éléments de grille
À partir de maintenant, nous avons une compréhension de base des propriétés des éléments de grille, nous allons maintenant avancer plus loin et mettre en œuvre les propriétés décrites ci-dessus.
Exemple
Supposons que nous avons deux lignes et quatre colonnes, et nous avons un total de six articles de grille. Maintenant, nous spécifierons les quatre premiers éléments de la première ligne et les deux derniers éléments de la deuxième ligne:
Modèle de mise en page de la grille
Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément
Sixième élément
De l'extrait ci-dessus, nous pouvons observer que dans la balise du corps, nous avons un élément parent et six éléments enfants. Dans la balise de tête, nous avons spécifié le style pour les éléments parents et enfants. De plus, comme nous voulons implémenter un style spécifique sur Item-Class5 et Item-Class6, nous les avons donc stylisés séparément:
La sortie vérifie le fonctionnement de la colonne de grille et les propriétés de la ligne de grille.
De même, nous pouvons utiliser les propriétés restantes de l'élément de grille en fonction de nos besoins.
Conclusion
Les articles dans le conteneur CSS Grid sont appelés articles de grille ou éléments enfants. CSS fournit de nombreuses propriétés pour travailler avec des éléments de grille CSS tels que le démarrage de la colonne de grille, le démarrage de la grille spécifie l'emplacement de démarrage de l'élément, les propriétés d'auto-auto-auto-auto-autonomes , axe colonne / bloc respectivement. De même, il existe de nombreuses autres propriétés des éléments de grille CSS qui peuvent être utilisées pour servir diverses fonctionnalités.