Une grille peut être définie comme un ensemble de lignes verticales et horizontales qui se croisent. La disposition CSS Grid sépare une page en sections principales. La propriété Grid offre un système de mise en page basé sur une grille comportant des lignes et des colonnes. Il facilite la conception de pages Web sans positionnement ni flottement. La disposition en grille nous permet de créer des structures de grille représentées en CSS , pas en HTML .

Semblable au tableau, il permet à un utilisateur d'aligner les éléments en lignes et en colonnes. Mais comparé aux tableaux, il est facile de concevoir une mise en page avec la grille CSS. Nous pouvons définir des colonnes et des lignes sur la grille en utilisant lignes-de-modèle-de-grille et colonnes-modèle-de-grille propriétés.

0,0625 en fraction

Un conteneur de grille peut être créé en déclarant le affichage : grille ou affichage : grille en ligne sur un élément. Le conteneur de grille contient les éléments d'une grille placés à l'intérieur des lignes et des colonnes.

Grille contre Flexbox

La question courante qui se pose généralement est de savoir en quoi la grille est différente de la flexbox. La grille est destinée aux mises en page bidimensionnelles (lignes et colonnes en même temps), tandis que la flexbox est utilisée pour les mises en page unidimensionnelles (soit en ligne, soit en colonne). Flexbox est utilisé lorsque quelque chose doit être en ligne droite.

Flexbox est utilisé pour organiser les éléments dans une seule colonne ou dans une seule ligne. D’un autre côté, la grille est préférable pour disposer les éléments dans plusieurs colonnes et lignes.

Comprenons la grille en CSS à l'aide d'un exemple.

Exemple

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Sortir