Mise en page avec grille CSS
Une grille est un ensemble de lignes horizontales et verticales qui se croisent et qui définissent les colonnes et les rangées de la grille.
CSS fournit un système de mise en page basé sur une grille avec des lignes et des colonnes, ce qui facilite la conception de pages web sans avoir à utiliser de flottants ni de positionnement.
Voici une mise en page web simple qui utilise une disposition en grille, contenant six colonnes et trois lignes :
Prise en charge des navigateurs
Actuellement, les dernières versions des navigateurs prennent toutes en charge la disposition en grille.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Élément de grille
La disposition en grille se compose d’un élément parent et d’un ou plusieurs éléments enfants.
Exemple
Essayez-le vous-même »
propriété display
Lorsqu’un élément HTML définit sa propriété display sur grid ou inline-grid, il devient un conteneur de grille, et tous les éléments enfants directs de cet élément deviennent des éléments de grille.
Piste de grille
Nous passons pargrid-template-columnsetgrid-template-rowsles propriétés pour définir les colonnes et les lignes de la grille.
Ces propriétés définissent les pistes de la grille. Une piste de grille est l'espace entre deux lignes quelconques de la grille.
Dans l'image ci-dessous, vous pouvez voir une piste avec un cadre vert — la première piste de ligne de la grille. La deuxième ligne comporte trois pistes à cadre blanc.
Dans l'exemple suivant, nous utilisonsgrid-template-columnsLa propriété crée quatre colonnes dans le conteneur de grille :
Exemple
Essayez-le vous-même »
Dans l'exemple suivant, nous utilisonsgrid-template-rowsLa propriété définit la hauteur des lignes dans le conteneur de grille :
unité fr
Les pistes peuvent être définies à l'aide de n'importe quelle unité de longueur.
La grille introduitfrdes unités pour nous aider à créer des pistes de grille flexibles. Une unité fr représente une part égale de l'espace disponible dans le conteneur de grille.
L'exemple suivant définit une définition de grille qui créera trois pistes de largeur égale, qui s'étendent et se rétrécissent en fonction de l'espace disponible.
Exemple
Essayez-le vous-même »
Cellule de grille
Une cellule de grille est la plus petite unité au sein d’un élément de grille, conceptuellement similaire à une cellule dans un tableau. Maintenant, revenons à notre exemple précédent : une fois qu’un élément de grille est défini dans un élément parent, ses éléments enfants seront disposés dans chaque cellule de grille prédéfinie. Dans l’image ci-dessous, je vais mettre en évidence la première cellule de grille.
Zone de grille
Les éléments de grille peuvent s’étendre sur une ou plusieurs cellules dans la direction de la ligne ou de la colonne et créer une zone de grille. La forme d’une zone de grille doit être un rectangle, c’est-à-dire que vous ne pouvez pas créer une zone de grille en forme de « L ». La zone de grille mise en évidence dans l’image ci-dessous s’étend sur 2 colonnes et 2 lignes.
colonnes de grille
La direction verticale des éléments de grille est appelée une colonne.
ligne de grille
La direction horizontale des éléments de grille est appelée une ligne.
Espacement de grille
L’espacement de grille (espacement de colonne) désigne l’espacement horizontal ou vertical entre deux cellules de grille.
Vous pouvez utiliser les propriétés suivantes pour ajuster la taille de l’espacement :
- grid-column-gap
- grid-row-gap
- grid-gap
L'exemple suivant utilise la propriétégrid-column-gappour définir l'espacement de grille entre les colonnes :
L'exemple suivant utilise la propriétégrid-row-gappour définir l'espacement de grille entre les lignes :
grid-gapLa propriété est un raccourci pour les propriétés `grid-row-gap` et `grid-column-gap` :
grid-gapLa propriété peut définir à la fois l'espacement des lignes et l'espacement des colonnes :
ligne de grille
Les intersections entre les colonnes et entre les lignes sont appelées lignes de grille.
Grid crée des lignes de grille numérotées pour nous permettre de positionner chaque élément de grille.
Par exemple, dans la grille ci-dessous avec trois colonnes et deux lignes, il y a quatre lignes de grille verticales (marquées par des cercles gris) et trois lignes de grille horizontales (marquées par des cercles noirs).
Les éléments de grille peuvent faire référence à ces numéros de ligne lorsqu'ils sont positionnés.
L'image ci-dessous définit quatre lignes de grille verticales et quatre lignes de grille horizontales :
L'ordre de numérotation des lignes de grille dépend du mode d'écriture du document. Dans les langues écrites de gauche à droite, la ligne de grille numéro 1 se trouve à l'extrême gauche. Dans les langues écrites de droite à gauche, la ligne de grille numéro 1 se trouve à l'extrême droite.
Ensuite, j'ai utilisé les propriétés `grid-column-start`, `grid-column-end`, `grid-row-start` et `grid-row-end` pour montrer comment utiliser les lignes de grille.
Dans l'exemple suivant, nous définissons les lignes de grille d'un élément de grille pour qu'elles commencent à la première colonne et se terminent à la troisième colonne :
Dans l'exemple suivant, nous définissons les lignes de grille d'un élément de grille pour qu'elles commencent à la première ligne et se terminent à la troisième ligne :
Propriétés de la grille CSS
| Propriété | Description |
|---|---|
| column-gap | Spécifie l'espace entre les colonnes |
| gap | row-gapetcolumn-gapLa propriété raccourcie de |
| grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, etgrid-auto-flowLa propriété raccourcie de |
| grid-area | Spécifie le nom de l'élément de grille, ou il peut aussi êtregrid-row-start, grid-column-start, grid-row-end, etgrid-column-endLa propriété raccourcie de |
| grid-auto-columns | Fait référence à la taille de colonne par défaut |
| grid-auto-flow | Spécifie comment fonctionne l'algorithme de placement automatique, en spécifiant précisément comment sont disposés les éléments qui sont automatiquement placés dans la grille. |
| grid-auto-rows | Fait référence à la taille de ligne par défaut |
| grid-column | grid-column-startetgrid-column-endThe shorthand property of |
| grid-column-end | Spécifie la position de fin de la colonne de l'élément de grille |
| grid-column-gap | Spécifie la taille de l'écart de l'élément de grille |
| grid-column-start | Spécifie la position de début de la colonne de l'élément de grille |
| grid-gap | grid-row-gapetgrid-column-gapThe shorthand property of |
| grid-row | grid-row-startetgrid-row-endThe shorthand property of |
| grid-row-end | Spécifie la position de fin de la ligne de l'élément de grille |
| grid-row-gap | Spécifie l'écart entre les lignes de l'élément de grille |
| grid-row-start | Spécifie la position de départ de la ligne de l'élément de grille |
| grid-template | grid-template-rows, grid-template-columnsetgrid-areasLa propriété raccourcie de |
| grid-template-areas | Spécifie comment les lignes et les colonnes sont affichées, à l'aide d'éléments de grille nommés. |
| grid-template-columns | Spécifie la taille des colonnes, ainsi que le nombre de colonnes définies dans la mise en page de grille. |
| grid-template-rows | Spécifie la taille des lignes dans la mise en page de grille |
| row-gap | Spécifie l'espace entre deux lignes |
autres extensionsEnsuite, nous pouvons utiliserCSS Grid Layout Mini-Gamepour tester ce que nous avons appris.