Qu'est-ce que CSS Grid?

L'attribution des postes appropriés aux éléments est très significatif lors de la conception d'un site Web. Il existe différentes propriétés et dispositions disponibles dans CSS qui aident à effectuer cette tâche. L'une de ces dispositions est le module de grille CSS qui organise des éléments en lignes et colonnes. L'objectif de cet article est de souligner quelle est cette mise en page et comment elle peut être utilisée.

Commençons.

Qu'est-ce que CSS Grid

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 avoir à passer par la peine d'utiliser le positionnement et les flotteurs.

Une grille positionne des éléments en ce qui concerne la page Web ou d'autres éléments présents sur la page Web. Ci-dessous, nous avons montré une représentation visuelle d'une disposition de grille CSS.

Un modèle de mise en page de grille fonctionne avec tous les derniers navigateurs. Il se compose de deux composants qui sont récipient de grille et articles de grille. Ci-dessous, nous les avons expliqués en détail.

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. Dans le but de faire un élément, adoptez le comportement d'un conteneur de grille définir sa propriété d'affichage sur la grille ou le réseau en ligne.

Articles 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.

Voici une représentation graphique du récipient de grille et des éléments de grille.

Comme déjà mentionné, une grille CSS divise une page Web en lignes et des colonnes pour organiser des éléments. Ces lignes et colonnes ainsi que d'autres terminologies de grille importantes sont expliquées ci-dessous.

Colonnes dans une grille

Les lignes verticales d'une grille dans laquelle les éléments sont placés sont considérés comme des colonnes dans une grille. Un système de grille peut avoir au moins deux et au plus douze colonnes ou plus.

Lignes dans une grille

Les lignes horizontales d'une grille à l'intérieur desquelles sont placées sont considérées comme des lignes dans une grille. Un système de grille peut avoir de nombreuses lignes.

Lacunes dans une grille

La zone entre chaque ligne et la colonne est appelée lacune.

Lignes dans une grille

Les lignes entre chaque ligne sont appelées lignes de ligne, tandis que les lignes entre chaque colonne sont appelées lignes de colonne.

Il existe de nombreuses propriétés liées à la grille CSS. Consultez la section suivante pour en savoir plus sur eux.

Propriétés de la grille

Le tableau ci-dessous donne un aperçu des propriétés de mise en page de la grille.

Propriétés	Description
colonne de la grille	Cette propriété indique le nombre et la taille des colonnes dans une disposition de grille.
lignes de tempête de grille	Il décrit la taille des lignes dans un système de grille.
grille-template-zones	Cette propriété attribue des noms à divers éléments dans une grille.
grille-auto-colonnes	Il définit la taille initiale d'une colonne.
grille-auto-rangs	Cette propriété définit la taille initiale d'une ligne.
grille-flow	Il indique comment les articles qui sont automatiquement sont positionnés dans un système de grille.
démarrage de la grille	Cette propriété indique par où commencer un article dans une grille.
grille-colonne de démarrage	Il remplit la même fonction que la propriété ci-dessus.
casse-grille
grille-colonne	Il remplit la même fonction que la propriété ci-dessus.
surface de grille	Cette propriété est utilisée pour nommer une zone de grille spécifique.
se raminer	Cette propriété énonce un écart entre les lignes.
chanqueur	Il énonce l'écart entre les colonnes.

Comprendre davantage le système de grille à l'aide d'un exemple.

Exemple

Dans l'exemple démontré ci-dessous, nous avons créé une disposition de grille simple. Le croquis de la grille est illustré ci-dessous.

Commençons le codage.

Html

UN
B
C
D

Ici, nous avons simplement imbriqué quatre conteneurs Div à l'intérieur d'un plus grand conteneur div. Chacun des élément div a été affecté à une classe.

CSS

.récipient
Affichage: grille;
Grid-Gap: 5px;
grille-template-colonnes: 120px 120px 120px;

En utilisant le «conteneur» de classe affecté au plus grand div, nous l'affichons comme une grille. De plus, attribué un espace de 5px entre les lignes et les colonnes. Enfin, nous avons créé trois colonnes avec une taille de 120px chacune en utilisant la propriété Grid-Template-Colonnes.

CSS

.article
Color en arrière-plan: Sandybrown;
Couleur blanche;
Border-Radius: 6px;
rembourrage: 25px;
taille de police: 20px;

Maintenant, nous stylisons simplement les éléments présents à l'intérieur du conteneur de la grille en utilisant certaines propriétés CSS de base.

CSS

.un
grille-colonne: 1/3; / * Spécifie l'emplacement et la taille de l'élément dans une colonne * /
Grid-Row: 1; / * Spécifie l'emplacement et la taille de l'élément dans une ligne * /

La propriété de la colonne de grille définit la position de démarrage et de fin de l'élément de grille dans une colonne, en attendant la propriété de grille définit la position d'un élément dans la ligne. Par exemple, dans l'extrait de code ci-dessus, l'article 1 commencera à s'afficher dans la colonne 1 et à se terminer dans la colonne 3, alors qu'il sera affiché dans la ligne 1.

CSS

.deux
Colonne de grille: 3;
Grid-Row: 1/3;

.trois
grille-colonne: 1;
Grid-Row: 2;

.quatre
grille-colonne: 2;
Grid-Row: 2;

En utilisant la colonne de grille et les propriétés de la grille, les positions du reste des éléments sont également spécifiées.

Sortir

Une disposition de grille simple a été générée.

Conclusion

Un modèle de mise en page de grille permet à ses utilisateurs d'organiser des éléments apparaissant sur un site Web en différentes lignes et colonnes. Ce modèle partitionne essentiellement une page Web en sections et aligne des éléments concernant la page Web ou d'autres éléments présents sur la page Web. Il se compose de divers éléments qui sont un conteneur de grille et des articles de grille. Un récipient de grille est l'élément parent, tandis que les articles de la grille sont des éléments d'enfants. Cet article traite de tous les détails nécessaires de la mise en page de la grille avec les représentations graphiques, et un exemple approprié.