Le modèle de disposition de la grille CSS nous permet de créer une disposition bidimensionnelle sur un site Web et d'aligner les éléments de la grille en lignes et colonnes. Si nous comparons le modèle de disposition de la grille CSS avec les modèles de mise en page précédents, par conséquent, nous saurons que le comportement à deux directions du modèle de grille CSS a complètement changé la façon de concevoir les interfaces utilisateur. Le modèle de disposition de la grille CSS permet de concevoir les pages Web sans utiliser les flotteurs, le positionnement, les blocs, etc.

Dans cet article, nous couvrirons toutes les bases du modèle de disposition de la grille CSS, et il sera organisé comme suit:

• Quel est le modèle de disposition de la grille CSS?
• Différence entre les grilles CSS et CSS Flexbox.
• Qu'est-ce qu'un récipient de grille?
• Que sont les articles de la grille?
• Mise en œuvre pratique de la disposition de la grille CSS.

Alors, commençons!

Quel est le modèle de disposition de la grille CSS

Il s'agit d'un modèle de mise en page basé sur une grille bidimensionnel avec des lignes et des colonnes. Ces lignes et colonnes peuvent contenir des éléments de grille.

Quelle est la différence entre la grille et le modèle Flexbox

Maintenant, vous devez vous demander à la fois CSS Flexbox et CSS Grid sont des modèles de mise en page, alors quelle est la différence entre ces deux modèles de mise en page?

Le tableau donné ci-dessous vous aidera à comprendre les principes fondamentaux de ce concept:

Disposition de la grille CSS	CSS Flexbox
C'est un modèle de mise en page bidimensionnel.	C'est un modèle de mise en page unidimensionnel.
La disposition de la grille peut fonctionner simultanément sur les lignes et les colonnes.	Le flexbox peut fonctionner sur des lignes ou des colonnes en même temps.
Il aide à créer des dispositions plus compliquées et organisées.	Il aide à concevoir et à créer des pages Web réactives.
Les grilles CSS sont les mieux adaptées aux dispositions à plus grande échelle.	Les dispositions CSS Flexbox sont les mieux adaptées aux dispositions à petite échelle.
Première approche de mise en page.	Content First Approche.

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

Un conteneur de grille est une boîte / conteneur qui contient des éléments de grille et peut placer ces éléments dans les lignes et les colonnes. Pour créer un conteneur de grille, nous devons utiliser la propriété d'affichage et définir sa valeur comme un réseau en ligne ou une grille.

Le tableau ci-dessous fournira un bref guide pour les propriétés du conteneur de grille:

Propriétés	Description
afficher	détermine un élément comme une grille en spécifiant sa valeur à la grille en ligne ou à la grille.
Grid-Template-Colonnes et Grid-Template Rows	Déterminez la taille des colonnes et des lignes dans un conteneur de grille, et ces propriétés peuvent prendre une liste de valeurs séparées de l'espace E.g. Tail de piste, nom de ligne.
grille-template-zones	Il détermine comment afficher les lignes et les colonnes en utilisant des éléments de grille nommés.
remplaçant de grille	Il s'agit d'une propriété abrégée utilisée pour atteindre les fonctionnalités de trois propriétés I.e. Grid-template-colonnes, ross-template et grille-zones.
row-gap et colonne	Ces propriétés déterminent l'écart entre les lignes de grille et les colonnes de grille respectivement.
grille-colonne et grille-row-gap	Spécifiez la taille de l'espace entre les différentes colonnes et les lignes de la grille respectivement.
grille	Il s'agit d'une propriété scolarisée utilisée pour atteindre les fonctionnalités de deux propriétés I.e. grille-colonne et grille-row-gap
justifier	Il aligne les éléments de la grille le long de l'axe des lignes / en ligne.
align-items	Il aligne les éléments de la grille le long des colonnes / axe en ligne.
lieux de place	Il s'agit d'une propriété raccourci pour les propriétés des éléments d'alignement et de justifier qui définissent ces deux propriétés dans une seule déclaration.
justifier	Il aligne la grille le long des lignes / axe en ligne
contenir l'alignement	Il aligne la grille le long des colonnes / axe de bloc
contenu de place	Il s'agit d'une propriété scoris.
grille-auto-colonnes	Il détermine la taille par défaut des colonnes…
grille-auto-rangs	Il définit la taille par défaut des lignes.
grille-flow	Il détermine comment les articles placés automatiquement sont ajoutés dans la grille CSS
grille	Propriété fermée pour les lignes de remplissage de grille, la grille-auto-rangs, les colonnes de la grille, la grille-auto-colonnes, la grille-ale-aas et les propriétés de grille-automne-flux.

Mise en œuvre pratique de la disposition de la grille CSS

Maintenant, mettons en œuvre quelques propriétés décrites ci-dessus pratiquement:

Exemple 1

Premièrement, nous implémenterons la propriété de la grille et définirons sa valeur comme "grille". Ensuite, nous utiliserons la propriété Grid-Template-Colonnes et définirons la valeur «Auto» pour les trois colonnes:

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

Nous obtiendrons la sortie suivante pour l'extrait de code donné ci-dessus:

Exemple 2

MAINTENANT IMPLATIONS également la propriété Grid-Template-Rows pour spécifier la taille de la ligne:

Grid-Template Rows: Auto 150px;

L'extrait ci-dessus montre que la taille de la première ligne est "auto" Et la taille de la deuxième ligne est «150px». La sortie résultante ressemblera à ceci:

Nous pouvons observer l'espace au bas de la deuxième rangée, qui valide le fonctionnement de la propriété de ross-temple.

Que sont les articles de la grille?

Les éléments / éléments présents dans le conteneur de grille CSS sont appelés articles de grille ou éléments enfants.

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	C'est une propriété scoris pour deux propriétés I.e. Grid-Row-Start et Grid-Row-end.
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.

Exemple 3

Dans cet exemple, nous utiliserons la propriété Align-Self dans le «Classe d'objets», Ainsi, tout le code sera le même que celui spécifié dans les exemples précédents et la seule différence se produira dans la classe d'élément comme indiqué ci-dessous:

.Classe d'élément
Color d'arrière-plan: SkyBlue;
Border: 2px noir solide;
rembourrage: 30px;
taille de police: 30px;
Texte-aligne: Centre;
Align-Self: Flex-End;

Nous définissons la valeur de la propriété Align-Self en tant que Flex-End, qui alignera les lignes à la fin du conteneur:

C'est ainsi que nous pouvons utiliser des propriétés de conteneur de grille ou d'élément de grille en fonction de notre scénario.

Conclusion

Le modèle de disposition de la grille CSS nous permet de créer une disposition bidimensionnelle sur un site Web et d'aligner les éléments de la grille en lignes et colonnes. Le comportement bidimensionnel du modèle de disposition de la grille nous permet de travailler simultanément sur les lignes et les colonnes. Le modèle de disposition de la grille CSS peut avoir un élément parent et plusieurs éléments enfants. L'élément parent est appelé récipient de grille, et l'élément enfant est appelé élément de grille. De nombreuses propriétés peuvent être utilisées pour travailler avec des modèles de mise en page de grille, tels que l'affichage, la grille, le lieu de place, les éléments justifiés, etc