CSS Grid – Éléments de la Grille

Éléments de la Grille: Placer Les Éléments dans la Grille

Les propriétés de grille appliquées au conteneur de grille servent à définir la structure de la grille tandis que les propriétés de grille appliquées aux éléments de la grille servent à positionner les éléments dans la grille. Lorsqu’un élément se retrouve sur la grille, il dépend de sa position et de sa largeur.

La position de la grille définit l’emplacement de l’élément sur la grille. Il peut être explicitement spécifié via les propriétés CSS ou placé automatiquement par le navigateur via l’algorithme de placement automatique. L’intervalle de grille définit le nombre de pistes de grille qu’un élément de grille occupe. Si ce n’est pas spécifié, la portée de la grille de chaque élément de grille sera par défaut à la valeur 1, ce qui signifie qu’il occupera l’espace de 1 cellule de grille.

Le navigateur déterminera la position et la taille de l’élément de la grille en fonction des 6 valeurs suivantes:

• row-start line
• row-end line
• row span
• column-start line
• column-end line
• column span

La spécification de n’importe quelles 2 des 3 valeurs dans la dimension de la ligne ou dans la dimension de la colonne déterminera la troisième valeur. Par exemple, si un élément de grille a une grid-column-start à la ligne de grille 1 et une grid-column-end à la ligne de grille 3, il est implicite que cet élément de grille a une grid span (La portée de la grille) 2.

L’algorithme de placement de grille gérera les valeurs qui n’ont pas de sens logique. Si la ligne de fin d’un élément de grille vient avant sa ligne de départ, les lignes de début et de fin seront échangées. Si la ligne de départ et la ligne de fin sont identiques, la ligne de fin sera ignorée.

.grid__item { grid-column-start: 5; grid-column-end: 2; }
/* will be treated as */
.grid__item { grid-column-start: 2; grid-column-end: 5; }

Si les deux, la ligne de départ (start line) et la ligne de fin (end line) ont une portée (span) définie, celle appliquée sur la ligne de fin sera ignorée.

.grid__item { grid-column-start: span 3; grid-column-end: span 2; }
/* will be treated as */
.grid__item { grid-column-start: span 3; }

Mettre en Ordre Les Éléments De La Grille (grid_items)

Si les positions de la grille ne sont pas explicitement spécifiées, les éléments de grille seront automatiquement placés dans la cellule de grille vide disponible en fonction de leur ordre source dans le document HTML. Cependant, nous sommes libres de réorganiser la présentation visuelle de nos éléments de la grille en utilisant les propriétés de grille. Comme cela est souligné dans la spécification CSS elle-même, le placement de grille n’affecte que la présentation visuelle. Le fait d’avoir l’ordre source correct est absolument essentiel pour les lecteurs d’écran, les discours, la navigation par clavier et d’autres agents utilisateurs non-CSS.

Il est conseillé d’avoir le contenu principal apparaissant d’abord dans l’ordre source avant d’ajouter des colonnes supplémentaires pour la navigation ou des liens connexes pour une meilleure accessibilité. Toutefois, d’un point de vue visuel, le modèle de conception le plus courant est d’avoir la navigation qui apparaît avant le contenu principal. Pour améliorer l’utilisabilité du site pour les utilisateurs qui ne peuvent pas naviguer avec une souris, de nombreux sites utilisent les liens «Skip Navigation», qui est un lien en haut de la page qui permet aux utilisateurs de passer directement au contenu principal.
Avec CSS Grid, nous pouvons maintenant structurer le balisage de notre document pour que le contenu principal apparaisse en premier dans l’ordre source, avant les liens de navigation et tout autre contenu supplémentaire. Nous pouvons ensuite utiliser la grille pour placer visuellement la navigation à gauche ou même au-dessus du contenu principal sans compromettre la convivialité pour les utilisateurs qui n’utilisent pas de souris.
Disons que nous avons choisi de structurer notre HTML avec le contenu principal apparaissant en premier dans l’ordre source comme suit:

<body>
  <header>...</header>
  <main>...</main>
  <nav>...</nav>
  <aside>...</aside>
  <footer>...</footer>
</body>

Avec Grid, il est possible de positionner visuellement la navigation sur la grille de manière à apparaître sous l’en-tête (header), mais au-dessus du contenu principal.

body { 
  display: grid;
  grid: "header header"
        "nav nav"
        "content sidebar"
        "footer footer";
  grid-template-columns: 1fr 25%; 
}
header { grid-area: header; }
nav { grid-area: nav; }
footer { grid-area: footer; }

Il est également possible d’appliquer la propriété de l’ordre aux éléments de la grille, en contrôlant l’ordre dans lequel les éléments de la grille apparaissent dans le conteneur de la grille. La valeur par défaut de tous les éléments est 0. La propriété de l’ordre, comme le placement de grille explicite, modifie uniquement l’ordre visuel. La navigation par clavier ou les médias non visuels comme la parole suivent toujours l’ordre source du document.

Éléments de Grille Superposés

Plusieurs éléments peuvent être placés dans la même cellule de grille. Nous pouvons positionner les éléments de la grille de manière à ce qu’ils se chevauchent. Sans spécifier explicitement l’index z (z-index), par défaut, les éléments de la grille qui apparaissent plus tard dans l’ordre source seront rendus en haut dans la dimension z (z-dimension). Le code suivant permettra d’empiler les éléments de la grille comme des fenêtres en cascade.

<div class="grid-container">
  <div class="grid__item a"><div class="box"></div>Here is some text. Text is inline.</div>
  <div class="grid__item b"><div class="box"></div>Here is some text. Text is inline.</div>
  <div class="grid__item c"><div class="box"></div>Here is some text. Text is inline.</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-template-rows: 150px 150px;
}
.grid__item {
  max-width: 150px;
}
.a {
  background-color: lime;
  grid-row: 1 / span 2;
  grid-column: 1 /span 2;
  align-self: start;
}
.b {
  background-color: skyblue;
  grid-row: 1 / span 2;
  grid-column: 1 /span 2;
  justify-self: center;
  align-self: center;
}
.c {
  background-color: orange;
  grid-row: 1 / span 2;
  grid-column: 1 /span 2;
  justify-self: end;
  align-self: end;
}

Les propriétés justify-self et align-self rendent la taille de l’élément de grille dans son contenu. Si elle n’est pas définie, l’élément de la grille se comporte comme si ces valeurs étaient définies pour être étirées. En faisant de chaque élément de grille une zone carrée de 4 cellules de grille, le justify-self et l’align-self peuvent être utilisés pour positionner l’élément de grille dans cette zone à 4 cellules.

Il est également possible de modifier l’ordre d’empilement des éléments de grille avec la propriété z-index. Tout comme les éléments positionnés, l’élément avec un index z supérieur s’affiche en haut de la pile. Avec les propriétés d’alignement mentionnées précédemment, nous pouvons réaliser des effets visuels assez intéressants.

<div class="grid-container">
  <div class="grid__item a">...</div>
  <div class="grid__item b">...</div>
  <div class="grid__item c">...</div>
  <div class="grid__item d">...</div>
  <div class="grid__item e">...</div>
</div>

.a {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: end;
  background-color: lime;
}
.b {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  background-color: yellow;
  border-radius: 50%;
}
.c {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-left: -20px;
  background-color: orange;
  text-align: right;
}
.d {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  background-color: skyblue;
  max-width: 80px;
}
.e {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  z-index: 5;
  justify-self: center;
  align-self: center;
  background-color: red;
  max-width: 100px;
}

Éléments de grille absolument positionnés

Il est possible de positionner absolument les éléments de la grille dans leur conteneur de grille en utilisant la position: relative sur le conteneur de la grille. Toutefois, l’application d’une position absolue à un élément de la grille l’exclut du flux de documents normal, ce qui signifie qu’il ne participe pas à la mise en page de la grille et ne remplira pas les cellules de la grille lors du placement automatique.

Les éléments de grille absolument positionnés peuvent toujours être placés dans des cellules de grille spécifiques en utilisant les propriétés de placement de grille, la ligne de grille et la colonne de grille, mais elle ne s’étendra pas pour remplir la cellule de grille entière, à la place, l’élément de grille rétréci pour s’adapter à sa taille Contenu. Ils ne créeront pas de pistes de grille implicites lorsqu’ils seront placés en dehors de la grille explicite, mais peuvent occuper des pistes de grille implicites déjà existantes.

Les décalages de haut, de droite, de bas et de gauche peuvent également être utilisés pour placer les éléments de grille dans le conteneur de grille. Les décalages sont calculés à partir du bord de remplissage du conteneur de grille.

Propriétés Liées aux Éléments de Grille

Les propriétés grid-column-start, grid-column-end et grid-row-start, grid-row-end

grid-column-start: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-column-end: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-row-start: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-row-end: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

Ces quatre propriétés définissent la taille d’un élément de grille et où il doit être placé dans la grille. Ensemble, ils spécifieront quelles lignes de grille formera les bords de la zone de grille d’un élément de grille.

• grid-column-start indique la ligne de la grille de la colonne où l’élément de la grille commence.
• grid-column-end: indique la ligne de la grille de la colonne où l’élément de la grille se termine.
• grid-row-start: indique la ligne de la grille de la ligne où commence l’élément de la grille.
• grille-ligne-end: indique la rangée de ligne où se termine l’élément de la grille.

Les valeurs possibles ont les significations suivantes:

auto

C’est la valeur initiale. Aucune ligne de grille n’a été spécifiée pour cette propriété, de sorte que l’élément sera automatiquement placé pour remplir la grille et avoir une plage par défaut de 1.

<custom-ident>

Peut être l’index numérique de la ligne de grille, ou une ligne de grille nommée.

[ <integer> && <custom-ident>? ]

Pour les lignes de grille nommées répétées, la valeur entière “n” définira la nième ligne de grille avec le nom spécifié. La valeur entière ne peut pas être 0.

.a { grid-column-start: 1 bar; grid-column-end: 3 foo; }
.b { grid-column-start: 1 bar; }
.c { grid-column-start: -1 foo; }

[ span && [ <positive-integer> || <custom-ident> ] ]

Fournit la possibilité de spécifier l’espace de grille (grid span) d’un élément de grille. Cette valeur, associée à la ligne de grille spécifiée, déterminera le placement de l’élément de la grille. L’élément de la grille couvrira N nombre de pistes de la ligne de grille spécifiée.
Par exemple, un élément de grille avec grid-column-start: span 2; Et grid-column-end: 4; Couvrira 2 colonnes de la ligne de grille 4, vers la ligne de départ.

Les propriétés grid-row et grid-column

grid-row: <grid-line> [ / <grid-line> ]?
grid-column: <grid-line> [ / <grid-line> ]?

Il s’agit d’un raccourci qui définit la ligne de départ et la ligne de fin pour les dimensions respectives dans la même déclaration. La propriété grid-row est le raccourcis pour grid-start-line et grid-line-end, tandis que la propriété grille-colonne est la sténographie pour la grid-column-start et la grid-column. Les valeurs possibles ont les significations suivantes:

<grid-line> [ / <grid-line> ]?

Reportez-vous à la syntaxe de <grid-line>. La seconde valeur est facultative.

La propriété grid-area

grid-area: <grid-line> [ / <grid-line> ]{0,3}

Il s’agit d’un raccourcis qui définit les lignes de grille qui définissent chacun des 4 bords de la zone de grille dans une seule déclaration. L’ordre de cette sténographie est row start / column-start / row-end / column-end. En d’autres termes, il fonctionne dans le sens inverse des aiguilles d’une montre pour les documents avec la direction de base par défaut de gauche à droite.

Ceci est l’opposé des autres propriétés 4-edge, comme margin ou padding.

Les valeurs possibles ont les significations suivantes:

<grid-line> [ / <grid-line> ]{0,3}

Reportez-vous à la syntaxe de <ligne de grille>. Cette propriété peut prendre jusqu’à 4 lignes de grille, les deuxième, troisième et quatrième valeurs étant facultatives.