Qu'est-ce que la propriété Grid?

La propriété de grille est une propriété abrégée pour les lignes de modèle de grille, les colonnes de modèle de grille, les zones de modèle de grille, les lignes automatiques de grille, les colonnes automatiques de grille, le flux automatique de grille, l'écart de colonne de grille et les propriétés d'espace de ligne de la grille.

Structure de la grille

La propriété Grid rend les éléments à afficher comme une matrice ⊞

 
 
 
 
 
 
 
 

En CSS

#récipient {
 affichage: grille;
 }

Dans exemple, #container est affiché sous forme de grille et ses éléments enfants seront affichés sous forme de cellules ou d'éléments de grille

Compatibilité du navigateur

C'est une grande excitation, qu'IE, Edge et Firefox prennent en charge la propriété de grille CSS . Généralement, tout le navigateur a une belle interface utilisateur de vue de grille dans les outils de développement.

Lignes de quadrillage

Les lignes de la grille sont des lignes horizontales et verticales, elles sont utilisées pour le positionnement. L'indice de positionnement peut être un entier (à la fois des entiers négatifs et positifs).

Propriétés → grille-colonne-début, grille-colonne-fin, grille-ligne-fin, grille-ligne-fin.

Exemple de code:

#grid> div: nth-child (2) {
 grille-début de colonne: 2;
 fin de colonne de grille: 3;
 début de la ligne de grille: 2;
 grille-fin de ligne: 3;
}

L'élément 2 commencera à la deuxième ligne verticale en 2 lignes horizontales et l'élément se terminera à 3 lignes verticales et 3 lignes verticales.

Ligne de la grille

Cellule de grille

Une cellule de grille est un espace entre deux lignes de grille verticales adjacentes et les deux lignes de grille horizontales adjacentes.

Cellule de grille

Pistes de grille

Une piste de grille est un espace entre deux lignes de grille adjacentes. c'est-à-dire ligne, colonnes.

Grid Track

Zone de grille et espace de grille

Une zone de grille est le groupe d'une ou plusieurs cellules.

Grid Gap est l'espace entre les lignes et les colonnes. C'est la propriété abrégée de la grille-espace-ligne et de la grille-colonne-espace.

Grille Ligne et colonne Grille

grid-row est une propriété raccourcie pour grid-row-start et grid-row-end.

grid-column est une propriété abrégée pour grid-column-start et grid-column-end

Ligne de la grille

grid-row-start → spécifie la position de départ d'un élément de la grille dans la ligne

eg.grid-row-start: 2 → L'élément commencera à la deuxième ligne verticale

grid-row-end → spécifie la position de fin d'un élément de la grille dans la ligne

par exemple, grille-fin de ligne: 3 → L'élément se terminera à la deuxième ligne verticale

Grid-auto-flow

Il contrôle le fonctionnement de l'algorithme de placement automatique. Par défaut, la valeur est ligne (les éléments sont placés en ligne)

grille-flux automatique: ligne;
grille-flux automatique: colonne;
Colonne de flux automatique de grille et ligne de flux automatique de grille

grille-flux automatique: ligne dense → Utilise un algorithme de compression «dense». Remplissez l'espace libre dans la grille en ligne.

grid-auto-flow: colonne dense → Utilise un algorithme de compression «dense». Remplissez l'espace libre dans la grille sur la base des colonnes

Grille explicite et grille implicite

Les grilles explicites sont des grilles créées par l'utilisateur à l'aide de grille-modèle-ligne, grille-modèle-colonnes

grille-modèle-colonnes: répéter (3, 100px);
grille-modèle-lignes: 100px 100px;

La grille implicite est créée par le navigateur. La taille de la grille implicite peut être modifiée à l'aide de la propriété grid-auto-colonnes et grid-auto-lignes.

grille-modèle-colonnes: répéter (3, 100px);
grille-lignes-automatiques: 100px;

Ordre de la grille:

Nous pouvons classer l'élément par propriété de zone de modèle.

nous pouvons changer la zone du modèle dans la requête multimédia et afficher une nouvelle structure de grille.

consultez le codepen pour en savoir plus.

Pour la grille, la plupart du temps, nous utilisons tous le système de grille bootstrap. Bootstrap peut changer un nom de classe dans chaque version (mais pas comme Angular ), nous devons donc nous rappeler quelle version a quel nom de classe .

En utilisant la propriété de grille CSS, We CAN (même dans IE ) affiche facilement les éléments en vue grille.

Merci beaucoup d'avoir lu! Si vous l'avez aimé, merci de soutenir en applaudissant et en partageant le message. N'hésitez pas à laisser un commentaire ci-dessous.