13 - CSS grid

Positionnement en grille : Grid Layaout

Principe

Les éléments sont positionnés dans les cases d’une grille virtuelle à deux dimensions.

grid grid

Conteneur GRID

Comme pour le positionnement Flex, nous devons définir un conteneur ayant la déclaration:

div.conteneur {
  ...
  display: grid;
  ...
}

Les éléments enfants du conteneur seront positionnés dans la grille.

On utilise des déclarations grid-template-rows et grid-template-columns pour définir la taille de la grille (nombre de cases) et les dimensions des cases:

	div.conteneur {
  ...
  border: 1px solid lightcoral; 
  display: grid;
  /* Une grille de 3 lignes et 2 colonnes */
  grid-template-rows: 5rem 40rem 5rem;
  grid-template-columns: 20% 80%;
}

La déclaration grid-template regrouppe ces deux déclarations.

Démonstration

Positionnement des éléments

  • Les éléments enfants seront placés dans les cases dans l’ordre de gauche à droite, de haut en bas.

Démonstration

  • Il est possible de changer la position d’un élément en utilisant la déclaration.

Taille relative des cellules

Dans les déclaration grid-template-*, il est possible d’utiliser des valeurs relatives.

	div.conteneur {
  ...
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 100px auto 100px;
}

La valeur auto est utile pour assigner l’espace restant.

Les déclarations en pourcentage représentent la taille totale du conteneur. Ainsi, cette déclaration ferait déborder la grille du conteneur:

	div.conteneur {
  ...
  display: grid;
  grid-template-columns: 100px 20% 80%;
  grid-template-rows: 100px 500px 100px;
}

Utiliser l’unité fr plutôt que % dans ce cas, pour cibler l’espace restant.

Démonstration

Alignement des éléments

Par défaut, les éléments sont alignés avec le coin supérieur gauche de leur case de la grille.

On utilise la déclaration justify-items pour aligner l’élément horizontalement, et la déclaration align-items pour modifier l’alignement vertical.

Pour changer l’alignement horizontal ou vertical d’un élément en particulier au sein de sa cellule, on utilise les déclarations justify-self et align-self

Démonstration

Alignement de la grille

La taille de la grille peut différer de la taille du conteneur.

conteneur{
  ...
  height: 35rem;
  grid-template: 5rem 20rem 5rem / 20% 40%; 
  /* Le conteur fait 35rem de haut et 100% de large. La grille
  fait 30rem de haut et 60% de large */
}

On utilise la déclaration justify-content et align-content pour aligner la grille au sein de son conteneur horizontalement et verticalement (resp.).

Démonstration

Placement des cellules

  • Rappel: Le placement par défaut: du coin supérieur gauche au coin inférieur droit.

  • La déclaration grid-column permet de spécifier le placement d’un élément dans une colonne ou un ensemble de colonnes sur sa ligne.

  • La déclaration grid-row permet de spécifier le placement d’un élément dans une ligne ou un ensemble de lignes.

Démonstration

Placement nommé des cellules

On peut subdiviser la grille en régions auxquelles on affecte un nom à l’aide de la déclaration grid-template-areas dans le conteneur.

.conteneur{
  display: grid;
  grid-template-rows: 5rem 20rem 5rem;
  grid-template-columns: 100px 20fr 80fr; 
  grid-template-areas: /* On nomme les 9 cellules*/
      "entete  entete   entete"
      "menu    sousmenu principal"
      ".       baspage  principal"
}

Une région qui s’étend sur plusieurs cellules est nommée plusieurs fois.

Une région vide est représentée par un point (.)

On spécifie ensuite pour les éléments de la grille dans quelle région ils seront placés en utilisant la déclaration grid-area.

.une_boite{
  /*IMPORTANT: Pas de "..." autour de entete*/
  grid-area: entete;
}

Démonstration

Autres déclarations

row-gap, column-gap et gap: pour définir l’espacement entre les cellules.

grid-area: qui combine les déclarations grid-column et grid-row en une seule, mais dont la syntaxe est difficile à lire (à éviter).