Introduction au module CSS Grid Layout

C'était une fois les tables, puis marges et flotteurs, puis boîte souple et maintenant la grille: CSS a toujours orienté ses efforts vers de nouvelles et meilleures solutions pour alléger le travail séculaire de codage des mises en page Web. le Modèle de disposition de grille CSS peut créer et mettre à jour la mise en page suivant deux axes: horizontal et vertical, affectant à la fois la largeur et la hauteur des éléments.

La disposition de la grille ne dépend pas de la position des éléments dans le balisage, vous pouvez donc mélanger les emplacements des éléments en balisage sans modifier la mise en page. Dans le modèle de grille, un élément de conteneur de grille est divisé en colonnes et en lignes (collectivement appelé pistes de la grille) par lignes de la grille. Voyons maintenant comment créer un exemple de grille.

Support du navigateur

Au moment de la rédaction de cet article, le module de grille CSS n'est pris en charge que par le dernier navigateur IE et Edge. La grille CSS est en phase expérimentale dans les autres principaux navigateurs dans lesquels vous devez activer le support manuellement:

• Firefox: Appuyez sur Maj + F2, entrez la commande suivante dans la barre de saisie GCLI qui apparaît au bas du navigateur: pref set layout.css.grid.enabled true.
• Chrome: Parcourir le chrome: // drapeaux URL et activer Fonctionnalités expérimentales de la plate-forme Web.

Tous les principaux navigateurs supporteront probablement venez au début / mi-2017.

Un exemple de grille

À transformer un élément en un conteneur de grille vous pouvez utiliser un de ces trois afficher Propriétés:

1. affichage: grille; - l'élément est converti en un conteneur de grille de blocs
2. affichage: inline-grid; - l'élément est converti en un conteneur de grille en ligne
3. display: sous-réseau; - si l'élément est un élément de la grille, il l'est converti en sous-réseau qui ignore les propriétés du modèle de grille et de l’écartement de la grille

Tout comme un tableau est composé de plusieurs cellules, une grille est composé de plusieurs cellules de la grille. Un élément de la grille est affecté à un ensemble de cellules de la grille qui est collectivement connu comme le zone de la grille.

Nous allons créer une grille avec cinq sections (zones de la grille): haut, bas, gauche, droite et centre. Le HTML est composé de cinq divs dans un conteneur div.

 
 
Haut
 
La gauche
 
centre
 
Droite
 
Bas
 
 

En CSS, le grille-template-zones propriété définit une grille avec différentes zones. Dans sa valeur, une chaîne représente une ligne de la grille et chaque nom valide dans une chaîne représente une colonne. À créer une cellule de grille vide vous devez utiliser le point (.) personnage dans une chaîne de rangée.

le noms de zone de grille doivent être référencés par le surface de la grille propriété des éléments individuels de la grille.

 .grid-container width: 500px; hauteur: 500px; affichage: grille; grid-template-areas: "haut en haut en haut" "de gauche à droite" "en bas en bas en bas";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: centre;  

Donc, ce code crée une grille avec trois lignes et colonnes. le Haut l'article occupe une zone qui s'étend sur trois colonnes dans la première rangée et le bas élément s'étend sur trois colonnes dans la dernière rangée. Chacun de la gauche, centre et droite articles prend une colonne dans la rangée du milieu.

Maintenant nous devons assigner des dimensions à ces lignes et colonnes. le Grille-modèle-colonnes et grid-template-rows Propriétés définir la taille de la piste de la grille (ligne ou colonne).

 .grid-container width: 500px; hauteur: 500px; affichage: grille; grid-template-areas: "haut en haut en haut" "de gauche à droite" "en bas en bas en bas"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Voici à quoi ressemble notre grille CSS (avec quelques styles supplémentaires):

Espace entre les éléments de la grille

Vous pouvez ajouter espace vide entre les colonnes et les lignes en utilisant grille-colonne-gap et gap-row-gap, ou leur propriété à long terme fossé.

 .grid-container width: 500px; hauteur: 500px; affichage: grille; grid-template-areas: "haut en haut en haut" "de gauche à droite" "en bas en bas en bas"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; intervalle de grille: 5 pixels 5 pixels;  

Ci-dessous, vous pouvez voir que le fossé la propriété a ajouté des espaces entre les éléments de la grille en effet.

Aligner le contenu de la grille et les éléments

le justifier le contenu propriété du conteneur de grille (.conteneur de grille) aligne le contenu de la grille le long de l'axe en ligne (axe horizontal) et la propriété aligner le contenu, aligne le contenu d'une grille le long de l'axe du bloc (axe vertical). Deux propriétés peut avoir l'une de ces valeurs: début, fin, centre, l'espace entre, espace-autour et espace-même.

Le cas échéant, la taille de la piste (ligne ou colonne) se rétrécit pour s'adapter au contenu quand aligné. Regardez les captures d'écran du contenu de la grille aligné avec différentes valeurs au dessous de.

justifier-contenu: commencer;

justifier-contenu: fin;

justifier-contenu: centre;

justifier-contenu: espace-entre;

justifier-contenu: espace-autour;

justifier-contenu: espace-uniformément;

align-content: start;

align-content: fin;

align-content: center;

align-content: espace-entre;

align-content: espace-autour;

align-content: espace-uniformément;

Les deux justifier le contenu et aligner le contenu Propriétés aligner tout le contenu dans une grille.

À aligner des éléments individuels dans leurs zones de grille, Utilisez le autre paire de propriétés d'alignement: éléments justifiables et align-items. Les deux peuvent avoir l'une de ces valeurs: début, fin, centre, de base (alignez les éléments le long de la ligne de base de la zone) et étendue (les articles remplissent toute leur surface).