Télécharger le PDF du cours
Il nous reste plus que deux choses à voir pour être totalement opérationnel avec nos grilles : comment aligner les éléments et comment les espacer.
En effet, par défaut, les éléments de grille vont s’étirer pour remplir tout l’espace dans lequel on les a positionnés quel que soit leur contenu. Nous allons pouvoir modifier ce comportement grâce aux propriétés d’alignement.
La plupart des propriétés d’alignement que nous allons voir ici devraient vous rappeler celles déjà vues dans la partie liée au modèle des boites flexibles et c’est tout à fait normal puisque le module CSS relatif à l’alignement (dans la spécification officielle) est commun à ces deux modèles.
Les axes des grilles
Le modèle des boites flexibles était un modèle unidimensionnel : c’est un modèle qui fonctionne avant tout selon un axe principal.
Le modèle des grilles est lui un modèle bidimensionnel : il va fonctionner selon deux axes qu’on va pouvoir manipuler de façon égale. On ne parlera donc plus d’axe « principal » et d’axe « secondaire ». A la place, nous parlerons d’axe de bloc et d’axe en ligne.
L’axe de bloc est l’axe selon lequel les éléments de type block sont disposés, c’est-à-dire l’axe vertical puisque les éléments de type block se placent par défaut les uns en dessous des autres.
L’axe en ligne est l’axe selon lequel les éléments de type inline sont disposés, c’est-à-dire l’axe horizontal puisque les éléments de type inline vont par défaut se placer les uns à côté des autres.
Avec les grilles, nous allons pouvoir gérer indifféremment l’alignement des éléments selon l’axe de bloc et l’axe en ligne.
Aligner les éléments ou les pistes d’une grille par rapport à l’axe de bloc
Commençons avec l’alignement des éléments ou des pistes selon l’axe de bloc. Nous allons pouvoir gérer cet alignement en utilisant les propriétés align-items, align-self et align-content.
La propriété align-items permet de contrôler l’alignement des éléments de grille le long de l’axe de bloc.
On va devoir appliquer cette propriété à l’élément conteneur de grille et nous allons pouvoir lui passer les valeurs suivantes :
stretch: Valeur par défaut. Les éléments de grille vont s’étirer pour occuper toute la hauteur des cellules dans lesquelles ils sont placés ;start: La hauteur des éléments va être déterminée par leur contenu et les éléments vont s’aligner à partir du départ (en haut) de l’espace dans lequel ils sont définis ;end: La hauteur des éléments va être déterminée par leur contenu et les éléments vont s’aligner à partir de la fin (en bas) de l’espace dans lequel ils sont définis ;center: La hauteur des éléments va être déterminée par leur contenu et les éléments vont s’aligner au milieu de l’espace dans lequel ils sont définis ;baseline: Les éléments vont être alignées de telle sorte à ce que leurs lignes de base soient alignées les unes par rapport aux autres.
See the Pen Cours HTML CSS 16.4.1 by Pierre (@pierregiraud) on CodePen.
Ici, on impose à nos rangées de faire 100px de haut. La hauteur intrinsèque de nos éléments de grille, qui ne contiennent qu’un chiffre, est inférieure à la hauteur des rangées. On va donc pouvoir utiliser align-items pour aligner les éléments en hauteur.
On définit également des éléments de hauteurs différentes afin de bien voir l’effet des propriétés d’alignement que nous étudions. Notez ici que la valeur stretch n’a pas la capacité d’étirer un élément qui possède une taille explicite.
La propriété align-self permet elle de contrôler l’alignement d’un élément de grille en particulier dans l’axe de bloc. On va devoir cette fois-ci l’appliquer à l’élément qu’on souhaite aligner. Cette propriété va pouvoir prendre les mêmes valeurs que la propriété align-items.
See the Pen Cours HTML CSS 16.4.2 by Pierre (@pierregiraud) on CodePen.
Si les pistes d’une grille n’occupent pas toute la hauteur dans la grille, alors on va pouvoir les aligner dans le conteneur selon l’axe de bloc, c’est-à-dire choisir comment distribuer l’espace restant en hauteur. Nous allons pouvoir faire cela en utilisant la propriété align-content.
Cette propriété va être appliquée à l’élément conteneur et nous allons pouvoir lui passer les valeurs suivantes :
start: La hauteur des pistes va être définie par la hauteur des éléments et les pistes vont s’empiler au début du conteneur selon l’axe de bloc c’est-à-dire en haut pour un langage dont l’écriture se fait de haut en bas ;end: La hauteur des pistes va être définie par la hauteur des éléments et les pistes vont s’empiler à la fin du conteneur selon l’axe de bloc c’est-à-dire en bas pour un langage dont l’écriture se fait de haut en bas ;center: La hauteur des pistes va être définie par la hauteur des éléments et les pistes vont s’empiler au centre du conteneur selon l’axe de bloc ;baseline: Les pistes vont être alignées de telles sortes à ce que les lignes de base soient alignées selon l’axe de bloc ;stretch: Les pistes vont s’étirer pour prendre toute la hauteur disponible dans le conteneur (sauf si une hauteur autre queautoa été explicitement définie) ;space-between: L’espace disponible dans le conteneur va être reparti équitablement entre les différentes pistes selon l’axe de bloc. La première et la dernière pistes vont être collées contre les bords du conteneur ;space-around: L’espace disponible dans le conteneur va être reparti équitablement entre les différentes pistes selon l’axe de bloc. L’espace entre les bords du conteneur et la première et la dernière piste sera deux fois moins important qu’entre deux pistes ;space-evenly: L’espace disponible dans le conteneur va être reparti équitablement entre les différentes pistes et entre une piste et un bord du conteneur selon l’axe de bloc.
See the Pen Cours HTML CSS 16.4.3 by Pierre (@pierregiraud) on CodePen.
Ici, on définit des conteneurs de 150px de haut et une hauteur auto pour nos rangées qui vont donc adapter leur hauteur à leur contenu.
J’utilise la valeur auto ici car c’est la seule valeur que align-content : stretch va pouvoir surcharger et car je sais que la hauteur de mes éléments est inférieure à la hauteur du conteneur et qu’on pourra donc bien voir l’effet de la propriété align-content.
J’ai également conservé les propriétés d’alignement des éléments dans les pistes et les éléments de différentes tailles afin que vous puissiez bien voir l’effet de chaque propriété.
Je vous conseille ici d’inspecter vos conteneurs avec les outils pour développeur de votre navigateur afin de bien voir la hauteur et l’alignement de nos différentes pistes.
Aligner les éléments ou les pistes d’une grille par rapport à l’axe en ligne
De façon similaire à l’alignement selon l’axe de bloc, nous allons pouvoir gérer l’alignement ou plus exactement la justification selon l’axe en ligne des éléments et des pistes en utilisant trois propriétés qui sont justify-items, justify-self et justify-content.
La propriété justify-items va nous permettre de contrôler l’alignement de tous les éléments dans le conteneur selon l’axe en ligne.
Nous allons devoir appliquer cette propriété à notre élément grille conteneur et allons pouvoir lui passer les mêmes valeurs qu’à la propriété align-items à savoir :
stretch: Valeur par défaut. Les éléments de grille vont s’étirer pour occuper toute la largeur des cellules dans lesquelles ils sont placés ;start: Les éléments vont se placer au début du conteneur selon l’axe en ligne (à gauche pour un langage qui va de gauche à droite) ;end: Les éléments vont se placer à la fin du conteneur selon l’axe en ligne (à droite pour un langage qui va de gauche à droite) ;center: Les éléments vont être centrés dans le conteneur selon l’axe en ligne ;baseline: La ligne de base des éléments va être alignée.
See the Pen Cours HTML CSS 16.4.4 by Pierre (@pierregiraud) on CodePen.
Cette fois-ci, afin de bien vous montrer l’effet des propriétés d’alignement dans l’axe en ligne, je définis des éléments de grille de largeurs diverses. Notez qu’une nouvelle fois la valeur stretch ne va pas pouvoir surcharger une largeur définie explicitement.
La propriété justify-self va elle nous permettre de contrôler l’alignement selon l’axe en ligne d’un élément en particulier. Nous allons appliquer cette propriété à l’élément de grille qu’on souhaite aligner et allons pouvoir lui passer les mêmes valeurs qu’à justify-items.
See the Pen Cours HTML CSS 16.4.5 by Pierre (@pierregiraud) on CodePen.
En, cas de conflit avec justify-items, la valeur de justify-self va être prioritaire puisque la sélection est plus précise.
Finalement, si les pistes d’une grille n’occupent pas tout l’espace en largeur dans le conteneur, alors nous allons pouvoir les aligner c’est-à-dire choisir comment distribuer l’espace restant selon l’axe en ligne.
Nous allons pouvoir faire cela en utilisant la propriété justify-content qu’on va devoir appliquer à l’élément grille conteneur. Nous allons pouvoir lui passer les mêmes valeurs qu’à la propriété align-content à savoir :
stretch: Les pistes vont s’étendre pour occuper toute la largeur disponible dans le conteneur ;start: Les pistes vont se grouper en début de conteneur (à gauche pour un langage dont l’écriture se fait de gauche à droite) ;end: Les pistes vont se grouper en fin de conteneur (à droite pour un langage dont l’écriture se fait de gauche à droite) ;center: Les pistes vont se grouper au centre du conteneur selon l’axe en ligne ;baseline: Les pistes vont s’aligner de telle sorte à ce que leurs lignes de bases soient alignées selon l’axe en ligne ;space-between: L’espace disponible dans le conteneur va être reparti équitablement entre les différentes pistes selon l’axe en ligne. La première et la dernière pistes vont être collées contre les bords du conteneur ;space-around: L’espace disponible dans le conteneur va être reparti équitablement entre les différentes pistes selon l’axe en ligne. L’espace entre les bords du conteneur et la première et la dernière piste sera deux fois moins important qu’entre deux pistes ;space-evenly: L’espace disponible dans le conteneur va être reparti équitablement entre les différentes pistes et entre une piste et un bord du conteneur selon l’axe en ligne.
See the Pen Cours HTML CSS 16.4.6 by Pierre (@pierregiraud) on CodePen.
Pour voir l’effet de justify-content, il faut que les pistes de notre grille n’occupent pas toute la largeur du conteneur. Pour cela, on définit ici une grille de 3 colonnes faisant chacune 100px de large ainsi qu’une taille fixe de 600px pour le conteneur.
Ensuite, on utilise justify-content pour distribuer l’espace restant dans le conteneur. La valeur start va regrouper nos différentes colonnes au début du conteneur par exemple, c’est-à-dire à gauche pour une écriture de gauche à droite.
Propriétés d’alignement raccourcies
On va également pouvoir préciser l’alignement des éléments ou des pistes sur les deux axes en une seule fois grâce aux propriétés d’alignement raccourcies suivantes :
place-items: notation raccourcie dealign-itemsetjustify-items;place-self: notation raccourcie dealign-selfetjustify-self;place-content: notation raccourcie dealign-contentetjustify-content.
See the Pen Cours HTML CSS 16.4.7 by Pierre (@pierregiraud) on CodePen.
Ici, on définit une grille de 3 colonnes et 2 rangées avec des tailles auto. Notre conteneur de grille a des dimensions de 600 * 150px.
Les éléments vont être placés en haut à droite dans leur cellule grâce à place-items: start end à l’exception des éléments auxquels on applique place-self: center center qui vont eux être centrés. L’espace en hauteur va être réparti équitablement entre les pistes tandis que l’espace en largeur va être absorbé grâce à la valeur stretch.
Ci-dessus, j’ai affiché le découpage de ma grille et donc les pistes (délimitées par des tirets noirs) en utilisant les outils pour développeurs de Chrome (clic droit > inspecter l’élément) afin que vous puissiez bien voir où sont alignés les éléments dans les pistes et les pistes dans le conteneur.
Définir les tailles des gouttières pour espacer les éléments de grille
Finalement, le modèle des grilles nous offre des propriétés pour éloigner les éléments de grille les uns des autres sans que les éléments ne s’éloignent des bords du conteneur de la grille.
On appelle cet espace entre les éléments des gouttières. La dimension des gouttières des cellules d’une grille va pouvoir être définie à l’aide des propriétés column-gap et row-gap ou avec la propriété raccourcie gap. Il faudra appliquer ces propriétés au conteneur.
See the Pen Cours HTML CSS 16.4.8 by Pierre (@pierregiraud) on CodePen.
Comme vous pouvez le voir, les gouttières sont des espaces qui n’apparaissent qu’entre deux éléments. On peut ainsi espacer les éléments de grille les uns des autres sans les éloigner des bords du conteneur de grille.
