Le flexbox va nous permettre de créer des dispositions complexes pour nos documents HTML. Ce modèle se compose d’un conteneur flexible et d’éléments flexibles dont la principale caractéristique va d’être… flexibles, c’est-à-dire de posséder une taille qui va s’adapter en fonction de l’espace disponible.

La déclaration d’un conteneur flexible crée automatiquement un nouveau contexte d’empilement ce qui signifie que les descendants directs d’un élément définir comme conteneur flexibles deviendront immédiatement des éléments flexibles auxquels on va pouvoir appliquer les propriétés du flexbox.

Le flexbox est, à la différence du modèle des grilles, un modèle de disposition principalement unidimensionnel : nous allons devoir définir un axe principal et un axe secondaire et la majorité du positionnement et de l’alignement des éléments flexibles va se faire selon l’axe principal.

A noter : Les propriétés float, clear et vertical-align n’ont aucun effet sur les éléments flexibles.

Création d’un conteneur flexible

Pour utiliser les propriétés du flexbox, nous allons déjà devoir définir un conteneur flexible. On va pour cela appliquer un display : flex ou display : inline-flex à un élément.

Cela crée automatiquement un nouveau contexte de formatage pour les éléments descendants directs de l’élément conteneur flexible.

Notez que display : flex va créer un conteneur flexible de niveau bloc tandis que display : inline-flex va créer un conteneur flexible de niveau inline.

Un conteneur avec display : flex occupera donc tout l’espace disponible dans son parent et se placera sur sa propre ligne tandis qu’un conteneur avec display : inline-flex n’occupera que l’espace nécessaire à son contenu dans son parent et pourra se placer à côté d’autres éléments.

Vous pouvez voir la différence de comportement entre display : flex et display : inline-flex avec l’exemple suivant code HTML puis code CSS puis résultat) :

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

Ici, on utilise 4 éléments div class="container" et div class="inline-container" qu’on définit comme conteneurs flexibles. Les éléments à l’intérieur de ces conteneurs (les div class="item") deviennent de facto des éléments flexibles.

On voit bien que les deux premiers conteneurs flexibles, qui sont de type bloc, occupent toute la largeur dans leur élément conteneur (le body de la page) tandis que les deux derniers qui sont de niveau inline n’occupent que la place nécessaire à leur contenu et se placent côte-à-côte et non pas sur une nouvelle ligne.

&nbsp ;

Définir la direction du placement des éléments flexibles : flex-direction

Le flexbox est un modèle principalement unidimensionnel. Cela implique qu’on va devoir définir un axe principal selon lequel nos éléments flexibles vont venir s’écouler. En termes physiques, l’axe principal peut être soit horizontal, soit vertical.

On utilise la propriété flex-direction pour définir la direction et le sens de l’axe principal utilisé par le conteneur flexible pour placer les éléments flexibles.

Cette propriété accepte les valeurs suivantes :

• row (valeur par défaut) : L’axe principal aura la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode. Le début de l’axe sera là où le texte commence et la fin sera là où il va (si le texte est horizontal et va de gauche à droite, le début de l’axe est physiquement le coin gauche et la fin le coin droit) ;
• row-reverse : L’axe principal aura la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode ou direction. La fin de l’axe correspond au côté où le texte démarre et inversement ;
• column : L’axe principal aura la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. Le début de l’axe correspond au côté lié au début de l’axe de bloc et la fin de l’axe au côté lié à la fin de l’axe de bloc. Dans un mode où les blocs s’empilent verticalement et de haut vers le bas, le début de l’axe correspond physiquement au bord supérieur et la fin au bord inférieur ;
• column-reverse : L’axe principal aura la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. La fin de l’axe correspond au côté lié au début de l’axe de bloc et inversement.

Attention : retenez bien que le résultat produit par ces valeurs dépend des valeurs définies pour la propriété writing-mode.

La propriété writing-mode permet d’indiquer si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.

Par défaut, les blocs vont s’empiler verticalement de haut en bas et le texte va s’écouler horizontalement, de gauche à droite. Dans ce cas-là, l’axe de bloc sera physiquement l’axe vertical et le début physique de l’axe sera le haut. L’axe en ligne sera physiquement l’axe horizontal et le début sera à gauche.

Pour en savoir plus à ce sujet, n’hésitez pas à consulter mon article sur les valeurs logiques et les modes d’écriture en CSS.

Prenons immédiatement un premier exemple d’utilisation de flex-direction avec writing-mode : horizontal-tb :

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée trois conteneurs flexibles. Le mode d’écriture est défini par writing-mode qui va appliquer sa valeur par défaut qui est horizontal-tb. Cette valeur signifie que les blocs s’empilent verticalement, de haut en bas. Le mode d’écriture et le mode typographique sont horizontaux.

On passe un flex-direction : row à notre premier conteneur. L’axe principal du conteneur va avoir la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode et le début de l’axe sera le côté ou commence le texte.

Avec writing-mode : horizontal-tb, les blocs s’empilent verticalement. L’axe de bloc est donc l’axe vertical et l’axe en ligne est l’axe horizontal. La direction de l’écriture est de gauche ) droite pour moi ; le début de l’axe se situe donc physiquement à gauche.

L’axe principal du conteneur sera donc physiquement l’axe horizontal et le début de l’axe sera ) gauche. Les éléments flexibles vont venir se placer selon cet axe, donc en ligne et de gauche à droite.

On passe un flex-direction : row-reverse à notre deuxième conteneur. L’axe principal sera donc également physiquement l’axe horizontal et le début de l’axe correspondra au côté où arrive la texte, c’est-à-dire physiquement à droite pour moi.

Finalement, on passe un flex-direction : column à notre troisième conteneur. L’axe principal du conteneur aura donc la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. Ce sera donc ici physiquement l’axe vertical. Le début de l’axe correspond au côté lié au début de l’axe de bloc, c’est-à-dire dans une disposition de haut en bas au côté supérieur.

Les éléments flexibles de ce conteneur vont donc être disposés en colonne, de haut en bas.

Changeons maintenant de mode d’écriture afin de voir l’impact sur les valeurs de flex-direction. On peut par exemple choisir des writing-mode : vertical-lr et writing-mode : sideways-lr.

Dans le cas d’un writing-mode : vertical-lr, les blocs s’empilent horizontalement, de droite à gauche et le mode d’écriture et le mode typographique sont verticaux. L’axe de bloc est donc physiquement l’axe horizontal.

Dans le cas d’un writing-mode : sideways-lr, les blocs s’empilent horizontalement, de gauche à droite. Le mode d’écriture est vertical, tandis que le mode typographique est horizontal. L’axe de bloc est donc physiquement l’axe horizontal.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

Contrôler le passage à la ligne des éléments flexibles : flex-wrap

La propriété flex-direction permet de définir quel axe est l’axe principal du conteneur flexible et la direction du placement des éléments flexibles dans cet axe.

La propriété flex-wrap permet d’indiquer si les éléments flexibles ont le droit de passer à la ligne ou pas (c’est-à-dire si le conteneur flexible peut être multilignes ou pas) ainsi que la direction des éléments dans laquelle les lignes doivent être empilées (c’est-à-dire la direction de l’axe secondaire).

A noter :

1. On entend par « ligne » une ligne dans la direction de l’axe principal : une « ligne » peut être une rangée si l’axe principal est horizontal ou une colonne si l’axe principal est l’axe vertical ;
2. L’axe secondaire est défini automatiquement lorsqu’on définit l’axe principal : si l’axe principal est l’axe horizontal, l’axe secondaire sera l’axe vertical et inversement.

Par défaut, il faut savoir que les conteneurs flexibles sont monoligne (les éléments flexibles n’ont pas le droit de passer à la ligne). Cela peut poser un problème lorsqu’un conteneur flexible possède beaucoup d’éléments flexibles (ou que ceux-ci possèdent des tailles explicites) puisqu’ils risquent alors de dépasser du conteneur.

La propriété flex-wrap va nous permettre de modifier ce comportement et de permettre aux éléments d’aller se placer sur la ligne (rangée ou colonne) suivante plutôt que de dépasser du conteneur flexible. Cette propriété supporte les valeurs suivantes :

• nowrap (valeur par défaut) : Les éléments n’ont pas le droit d’aller à la ligne ;
• wrap : Les éléments vont se placer à la ligne plutôt que de dépasser du conteneur. L’axe secondaire aura la même direction que l’axe en ligne ou l’axe de bloc (selon l’axe principal choisir) défini par writing-mode ;
• wrap-reverse : Les éléments vont se placer à la ligne plutôt que de dépasser du conteneur. La direction de l’axe secondaire sera inversée par rapport à celle de l’axe en ligne ou l’axe de bloc (selon l’axe principal choisir) définie par writing-mode.

Imaginons qu’on ait défini un writing-mode : horizontal-tb. Le texte va donc s’écouler physiquement de gauche à droite puis de haut en bas.

Si on a également défini un conteneur flexible avec flex-direction : row, alors l’axe principal est l’axe physique horizontal et le contenu s’écoule de gauche à droite. En ajoutant flex-wrap : wrap, les éléments qui dépassent vont venir se placer sous les premiers (les lignes vont s’empiler du haut vers le bas). En ajoutant flex-wrap : wrap-reverse, en revanche, les éléments qui dépassent vont venir se placer au-dessus des premiers (les lignes vont s’empiler du bas vers le haut).

Si on a plutôt défini un conteneur flexible avec flex-direction : column, alors l’axe principal est l’axe physique vertical et le contenu s’écoule de haut en bas. En ajoutant flex-wrap : wrap, les éléments qui dépassent vont venir se placer à droite des premiers (les lignes vont s’empiler de la gauche vers la droite). En ajoutant flex-wrap : wrap-reverse, en revanche, les éléments qui dépassent vont venir se placer à gauche des premiers (les lignes vont s’empiler de la droite vers la gauche).

Regardez plutôt l’exemple suivant :

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

Note : Dans cet exemple, j’ajoute des tailles explicites à mes éléments flexibles afin que la taille totale des éléments flexibles soit plus grande que celle du conteneur dans son axe principal (en largeur si l’axe principal est horizontal ou en hauteur si l’axe principal est vertical). Je fais cela plutôt que d’ajouter beaucoup d’éléments pour ne pas que mon code d’exemple soit trop long.

Si aucun passage à la ligne n’est autorisé, les éléments vont par défaut essayer de rétrécir pour rentrer dans le conteneur. C’est la raison pour laquelle vous ne voyez aucun élément dépasser. Cependant, si vous essayez d’ajouter des éléments dans le conteneur, vous allez voir qu’ils vont dépasser à partir du moment où la somme des largeurs des contenus sera plus importante que la taille du conteneur.

La propriété raccourcie flex-flow

La propriété flex-flow est une propriété raccourcie qui permet de définir les valeurs de flex-direction et de flex-wrap en une seule fois.

Contrôler la flexibilité des éléments flexibles avec flex

L’un des intérêts principaux du flexbox est de définir des éléments flexibles et de pouvoir contrôler leur flexibilité, c’est-à-dire leur capacité à rétrécir si le conteneur a besoin d’espace ou au contraire de s’étendre si il reste de l’espace dans le conteneur flex à distribuer.

Contrôler la faculté des éléments flexibles à s’étendre avec flex-grow

La propriété flex-grow permet de définir le facteur d’agrandissement d’un élément flexible.

Ce facteur d’agrandissement détermine la quantité d’espace disponible qui sera absorbée par cet élément flexible par rapport aux autres éléments flexibles. La valeur par défaut est flex-grow : 0 qui signifie que les éléments flexibles n’ont pas le droit de grandir.

Imaginons un conteneur flexible avec flex-direction : row qui fait 1000px de large et qui contient 3 éléments qui font chacun 200px de large. Il reste donc 1000 – (3 * 200) = 400px d’espace disponible en largeur.

On définit un flex-grow : 2 au premier élément flexible et un flex-grow : 1 aux deux autres. Le premier élément va grandir de manière à absorber deux fois plus d’espace que les autres. Il va donc absorber 200px sur les 400 restants tandis que les deux autres éléments vont absorber 100px chacun.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

Contrôler la faculté des éléments flexibles à rétrécir avec flex-shrink

La propriété flex-shrink permet de définir le facteur de rétrécissement d’un élément flexible.

Ce facteur de rétrécissement détermine la capacité des éléments à se compresser pour faire de la place dans le conteneur lorsque la taille de l’ensemble des éléments flexibles est supérieure à celle du conteneur.

La valeur par défaut est flex-shrink : 1, ce qui signifie que les éléments vont par défaut se compresser au besoin. C’est la raison pour laquelle ils ne dépassaient pas du conteneur dans l’exemple donné pour illustrer le comportement de la propriété flex-wrap.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

Définir la taille de base des éléments flexibles avant distribution de l’espace restant

La propriété flex-basis permet de définir la taille de base des éléments flexibles avant distribution de l’espace restant ou rétrécissement. La taille définie sera la largeur si l’axe principal est horizontal ou la hauteur si l’axe principal est vertical.

La propriété flex-basis accepte des valeurs de type longueur absolue (px par exemple) ou relative (% par exemple) ainsi que les valeurs auto (valeur par défaut) et content.

La valeur auto indique que la propriété flex-basis devra se référer à la valeur définie par width ou height si elle a été définie (ou sera égale à content si rien n’a été défini).

La valeur content indique que la taille de l’élément flexible sera relative à celle de son contenu. Attention, cette valeur est encore peu supportée (elle n’est notamment pas supportée par Chrome ni par Safari).

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

La propriété raccourcie flex

La propriété flex est une propriété raccourcie qui permet de définir les valeurs de flex-grow, flex-shrink et flex-basis d’un seul coup.

On peut soit passer les valeurs des propriétés flex-grow, flex-shrink et flex-basis à la suite à flex, soit lui passer les mots clefs suivants :

• flex : initial qui est l’équivalent de flex : 0 1 auto ;
• flex : auto qui est l’équivalent de flex : 1 1 auto ;
• flex : none qui est l’équivalent de flex : 0 0 auto.

Gérer l’alignement des éléments flexibles selon l’axe principal : justify-content

La propriété justify-content va nous permettre de gérer l’alignement des éléments flexibles selon l’axe principal choisi pour le conteneur flex. On va appliquer justify-content au conteneur flex.

Si l’axe principal est l’axe horizontal, on va par exemple pouvoir aligner (grouper) les éléments à gauche, à droite, au centre ou encore faire en sorte qu’ils soient répartis équitablement dans l’axe, etc.

La propriété justify-content supporte les valeurs suivantes :

• flex-start (valeur par défaut) : Les éléments sont groupés au début de l’axe principal ;
• flex-end : Les éléments sont groupés à la fin de l’axe principal ;
• center : Les éléments sont groupés au centre de l’axe principal ;
• space-between : Les éléments sont distribués régulièrement dans l’axe, ce qui signifie qu’il y aura le même espace entre chaque élément. Le début du premier élément est collé contre le début du conteneur et la fin du dernier élément est collée contre la fin du conteneur ;
• space-around : Les éléments sont distribués régulièrement dans l’axe, ce qui signifie qu’il y aura le même espace entre chaque élément. L’espace entre le début du premier élément et le début du conteneur et entre la fin du dernier élément et la fin du conteneur est égal à la moitié de l’espace entre deux éléments.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée cinq conteneurs flexibles avec un axe principal horizontal et trois conteneurs flexibles avec un axe principal vertical qui contiennent chacun trois éléments flexibles. Chacun des éléments flexibles possède un flex : 0 0 20% afin de s’assurer qu’il reste de l’espace dans l’axe principal du conteneur (condition nécessaire pour observer l’effet de justify-content). On applique ensuite la propriété justify-content avec des valeurs différentes à chaque conteneur.

Gérer l’alignement des éléments flexibles selon l’axe secondaire : align-items et align-self

La propriété justify-content permet d’aligner les éléments flexibles selon l’axe principal du conteneur flex. La propriété align-items permet elle d’aligner les éléments flexibles selon l’axe secondaire du conteneur flex.

Si l’axe principal est l’axe horizontal, la propriété align-items va donc gérer l’alignement des éléments dans l’axe vertical et inversement.

La propriété align-self permet quant à elle de régler l’alignement des éléments flexibles de manière individuelle.

Nous allons appliquer align-items au conteneur et align-self aux différents éléments flexibles. Notez que si align-items et align-self sont définies pour un élément, la valeur retenue pour l’élément flexible sera celle de align-self.

Les propriétés align-items et align-self supportent les valeurs suivantes :

• auto (uniquement supportée par align-self) : L’alignement des éléments flexibles dans l’axe secondaire du conteneur est contrôlé par la valeur de align-items du parent de l’élément ;
• flex-start : Les éléments flexibles vont se grouper au début de l’axe secondaire ;
• flex-end : Les éléments flexibles vont se grouper à la fin de l’axe secondaire ;
• center : Les éléments flexibles vont se grouper au centre de l’axe secondaire ;
• baseline : Les éléments vont s’aligner dans l’axe secondaire de telle manière à ce que leur ligne de base soit alignée ;
• stretch : Les éléments flexibles vont s’étendre pour occuper toute la place dans l’axe secondaire du conteneur flex.

A noter que la valeur par défaut de align-items est stretch tandis que celle de align-self est auto.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

Les cinq premiers conteneurs flexibles de l’exemple précédent possèdent un axe principal physique horizontal. La propriété align-items va donc aligner les éléments dans l’axe secondaire. Le début physique de cet axe est le bord supérieur du conteneur et la fin le bord inférieur. align-items : flex-start va donc aligner les éléments en haut tandis que align-items : flex end alignera les éléments en bas.

Pour les conteneurs flex dont l’axe principal est l’axe vertical, la propriété align-items va aligner les éléments dans l’axe horizontal (à gauche, à droite, etc.).

Un élément du dernier conteneur possède également un align-self : center afin que vous puissiez bien observer que cette propriété applique sa valeur par-dessus align-items.

Gérer l’alignement des lignes selon l’axe secondaire : align-content

Dans certains cas, il peut arriver que le conteneur flexible soit plus grand que l’ensemble des éléments qu’il contient dans son axe secondaire et qu’il reste donc de l’espace à distribuer.

Dans ce cas-là, on peut utiliser la propriété align-content qui va servir à aligner les différentes lignes selon l’axe secondaire du conteneur, c’est-à-dire qui va nous permettre de répartir l’espace restant selon l’axe secondaire du conteneur en plaçant cet espace avant, après ou entre les lignes.

Notez que la propriété align-content n’a aucun effet si le conteneur flexible ne possède qu’une seule ligne.

La propriété align-content supporte les valeurs suivantes :

• flex-start : Les lignes d’éléments flexibles vont se grouper au début du conteneur flexible selon son axe secondaire ;
• flex-end : Les lignes d’éléments flexibles vont se grouper à la fin du conteneur flexible selon son axe secondaire ;
• center : Les lignes d’éléments flexibles vont se grouper au centre du conteneur flexible selon son axe secondaire ;
• space-between : L’espace restant dans le conteneur va être réparti équitablement entre les lignes selon l’axe secondaire. Il n’y a pas d’espace entre le départ du conteneur et la première ligne ni entre la fin du conteneur et la dernière ligne ;
• space-around : L’espace restant dans le conteneur va être réparti équitablement entre les lignes selon l’axe secondaire. L’écart entre le début du conteneur et la première ligne et entre la dernière ligne et la fin du conteneur est égal à la moitié de l’espace entre deux lignes ;
• stretch (valeur par défaut) : Les lignes vont s’étendre afin d’occuper tout l’espace selon l’axe secondaire du conteneur.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

Ici, on définit plusieurs conteneurs flexibles et on fait en sorte que ces conteneurs soient plus grands que l’ensemble des lignes qu’ils contiennent afin qu’il reste de l’espace à distribuer selon leur axe secondaire. On distribue ensuite cet espace avec align-content.

Tableau récapitulatif des propriétés du flexbox CSS

C’est un modèle totalement bidimensionnel, ce qui signifie qu’on va avoir accès à des propriétés similaires pour disposer nos éléments selon l’axe horizontal ou l’axe vertical (à la différence du modèle des boites flexibles dans lequel on doit définir un axe principal et un axe secondaire de disposition).

Le modèle des grilles va donc s’avérer très précieux pour aligner les contenus selon les deux dimensions horizontale et verticale.

Pour définir un modèle de disposition en ligne, on va déjà devoir définir un conteneur de grille puis allons ensuite pouvoir appliquer différentes propriétés au conteneur ou aux éléments de grille.

Notes préalables utiles pour la lecture de ce guide :

• L’axe de bloc est l’axe selon lequel sont disposés les éléments de type bloc, c’est-à-dire l’axe vertical si writing-mode possède la valeur horizontal-tb (valeur par défaut) car les blocs se placent les uns en dessous des autres, dans la hauteur de la page ;
• L’axe en ligne est l’axe selon lequel s’écoule le contenu inline c’est-à-dire l’axe horizontal si writing-mode possède la valeur horizontal-tb (valeur par défaut) ;
• La définition des axes de bloc et en ligne, de leur « début » et de leur « fin » peuvent être modifiés grâce à certaines propriétés CSS et notamment la propriété direction : si on choisit une direction horizontale et un sens d’écriture de droite à gauche par exemple, le « début » de l’axe en ligne sera à droite et non pas à gauche, etc.
• Les propriétés et valeurs display : inline-block, display : table-cell, float, vertical-align et column-* n’ont aucun effet sur les éléments de grille.

Définir un conteneur de grille

La première chose à faire va être de définir un conteneur de grille. On va pour cela appliquer un display : grid ou display : inline-grid à un élément de niveau bloc.

Cela va automatiquement créer un nouveau contexte de formatage pour les éléments contenus dans notre conteneur de grilles. Cela signifie que les éléments enfants vont devenir des éléments de grille et qu’on va pouvoir leur appliquer les propriétés liées aux éléments de grille.

Notez que display : grid va créer une grille de niveau bloc tandis que display : inline-grid va créer une grille de niveau inline.

Un conteneur avec display : grid occupera donc tout l’espace disponible dans son parent et se placera sur sa propre ligne tandis qu’un conteneur avec display : inline-grid n’occupera que l’espace nécessaire à son contenu dans son parent et pourra se placer à côté d’autres éléments.

Regardez plutôt le code suivant pour bien identifier la différence (code HTML puis code CSS puis résultat) :

See the Pen
CSS Grid Layout #1 : Grid Container by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #1 : Grid Container by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #1 : Grid Container by Pierre (@pierregiraud)
on CodePen.

Ici, on utilise 4 éléments div class="container" et div class="inline-container" qu’on définit comme conteneurs de grille. Les éléments à l’intérieur de ces conteneurs (les div class="item") deviennent de facto des éléments de grille.

On voit bien que les deux premiers conteneurs de grilles, qui sont de type bloc, occupent toute la largeur dans leur élément conteneur (le body de la page) tandis que les deux derniers qui sont de niveau inline n’occupent que la place nécessaire à leur contenu et se placent côte-à-côte et non pas sur une nouvelle ligne.

Le vocabulaire des grilles : colonnes, rangées, lignes, pistes et zones de grille

Avant d’aller plus loin, il me semble important de définir certains éléments de langage liés aux grilles afin de démarrer avec des bases solides et stables.

Une grille est composée de colonnes et de rangées. On va pouvoir disposer les éléments de grille selon ces colonnes et rangées.

Les colonnes et les rangées des grilles sont séparées par des lignes imaginaires qui servent à définir les « cellules » de la grille.

Une grille possédant 3 colonnes et 2 rangées va donc posséder 4 lignes verticales et 3 lignes horizontales, une grille possédant 4 colonnes et 4 rangées va posséder 5 lignes verticales et 5 lignes horizontales et etc.

Ci-dessous, vous pouvez retrouver une représentation visuelle des lignes d’une grille. Ma grille contient ici 3 colonnes et 2 rangées. Les lignes verticales ont été dessinées en bleu et les lignes horizontales ont été dessinées en rouge.

L’espace entre deux lignes adjacentes est ce qu’on appelle une piste de grille. Le terme piste sert donc tout simplement à désigner indifféremment une colonne ou une rangée dans une grille.

Ci-dessus, j’ai créé deux grilles composées de 3 colonnes et de 2 rangées. En jaune, j’ai colorié une piste pour chacune des deux grilles.

Finalement, une zone de grille correspond à l’espace délimité par deux lignes de colonnes et deux lignes de rangées qui ne sont pas nécessairement adjacentes. Ci-dessous, j’ai dessiné une zone dans chacune de mes deux grilles (la première couvre 2 cellules et la deuxième couvre 4 cellules).

Définir explicitement des colonnes et des rangées dans une grille CSS : grid-template-columns et grid-template-rows

Une grille est formée de colonnes et de rangées. On peut définir le nombre et la taille de chacune de ces colonnes et rangées grâce aux propriétés grid-template-columns et grid-template-rows qu’on appliquera au conteneur de grille.

On va pouvoir passer des valeurs de type longueur (en px par exemple), pourcentage %, fraction fr ou la valeur auto aux propriétés grid-template-columns et grid-template-rows.

Cela va nous permettre de créer des colonnes et des rangées de tailles fixes ou variables. Notez que l’unité fr permet à une colonne ou à une rangée de calculer sa taille en fonction des autres.

Regardez plutôt l’exemple ci-dessous (code HTML puis CSS puis résultat) :

See the Pen
CSS Grid Layout #2 : grid-template-columns & grid-template-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #2 : grid-template-columns & grid-template-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #2 : grid-template-columns & grid-template-rows by Pierre (@pierregiraud)
on CodePen.

On définit trois conteneurs de grille avec display : grid. Chaque conteneur contient trois éléments de grille.

Les colonnes et rangées de notre première grille sont définies par grid-template-columns: 100px auto et grid-template-rows: 50px 50px.

On va passer autant de valeurs à grid-template-columns ou grid-template-rows qu’on souhaite définir de colonnes et de rangées dans notre grille.

Les valeurs passées à grid-template-columns définissent la largeur des colonnes tandis que les valeurs passées à grid-template-rows définissent la hauteur des rangées.

Dans ce premier cas, notre grille possède deux colonnes d’une largeur de 100px et auto (ce qui dans ce cas fait que la deuxième colonne occupe toute la largeur restante) et deux rangées d’une hauteur de 50px chacune.

Notre deuxième grille possède 3 colonnes de largeurs 1fr, 2fr et 1fr et une seule rangées d’une hauteur auto. Cela signifie que l’espace va être partagé entre les colonnes de telle manière à ce que la première et troisième colonne occupent la même largeur et que la deuxième colonne occupe une largeur deux fois plus importante. Ici, cela est l’équivalent d’écrire 25% 50% 25%.

Notre troisième grille possède trois colonnes et deux rangées. Les colonnes sont définies avec grid-template-columns : 1fr 50% 2fr. Dans ce cas, la largeur de la deuxième colonne va être calculée en premier et les deux autres colonnes dont la largeur est exprimée en fraction de l’espace vont se partager le reste de l’espace (les 50% restants donc) avec la troisième colonne qui va récupérer deux fois plus d’espace que la première.

Dans ce cas, la deuxième colonne prend donc 50% de la largeur de la grille puis les 50% restants sont partagés entre les première et troisième colonnes.

Notez qu’on va également pouvoir utiliser la fonction CSS repeat() pour définir des colonnes et des rangées de grille. Cette fonction va s’avérer utile dans le cas où on souhaite créer une grille avec beaucoup de colonnes ou de rangées semblables puisqu’elle va nous permettre de répéter un certain schéma un certain nombre de fois.

Écrire grid-template-columns : repeat(3, 1fr) est équivalent à écrire grid-template-columns : 1fr 1fr 1fr par exemple.

Enfin, notez qu’on va également pouvoir passer des valeurs de type nom aux propriétés grid-template-columns et grid-template-rows qui vont nous permettre de nommer les lignes précédant la colonne ou la rangée en question.

Cela va pouvoir être utile pour pouvoir y faire référence plus facilement lorsqu’on voudra positionner nos éléments de grille dans la grille par la suite.

On va passer ces noms entre crochets comme ceci :

See the Pen
CSS Grid Layout #3 : Grid Lines name by Pierre (@pierregiraud)
on CodePen.

Positionner les éléments de grille dans une grille CSS

Le modèle des grilles est un modèle de positionnement bidimensionnel, ce qui signifie qu’on va pouvoir positionner puis aligner les éléments selon l’axe horizontal et selon l’axe vertical.

Par défaut, les éléments de grille n’occupent qu’une colonne et qu’une ligne et se placent dans l’ordre de leur écriture.

Positionner les éléments à partir des colonnes et des rangées

Pour positionner les éléments dans une grille, nous allons pouvoir utiliser les propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end ou leurs versions raccourcies grid-column et grid-row.

Ces propriétés vont nous permettre de spécifier les lignes de départ et de fin pour l’axe vertical (column) et l’axe horizontal (row) pour chaque élément de la grille.

Les versions raccourcies vont prendre deux valeurs : la valeur de la ligne de départ et celle de la ligne de fin pour l’axe concerné. Ces deux valeurs vont être séparées par un slash.

Définissons immédiatement une nouvelle grille composée de 5 colonnes et 3 rangées régulières et possédant 3 éléments et essayons de placer ces éléments dans la grille.

Code HTML :

See the Pen
CSS Grid Layout 4 : grid-column & grid-row by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
CSS Grid Layout 4 : grid-column & grid-row by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
CSS Grid Layout 4 : grid-column & grid-row by Pierre (@pierregiraud)
on CodePen.

Notre premier élément est positionné en utilisant les 4 propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.

On indique ici que le début de notre premier élément doit se placer contre la première ligne verticale (ligne des colonnes ; c’est-à-dire tout à gauche) et contre la première ligne horizontale (ligne des rangées ; c’est-à-dire tout en haut) et qu’il doit couvrir la surface jusqu’à la troisième ligne verticale (c’est-à-dire couvrir l’espace relatif aux deux première colonnes) et jusqu’à la quatrième ligne horizontale (c’est-à-dire tout l’espace en hauteur).

Pour notre deuxième élément, on ne précise que les propriétés grid-column-start et grid-column-end et on lui demande de commencer au niveau de la troisième ligne verticale et de couvrir l’espace jusqu’à la sixième ligne verticale. Sa « hauteur » (le nombre de rangées de la grille qu’il devra occuper) sera celle par défaut c’est-à-dire une rangée.

Notre troisième élément est positionné grâce aux propriétés raccourcies grid-column et grid-row. On indique deux valeurs à chaque fois pour ces deux propriétés séparées par un slash : la première valeur correspond à la ligne de départ et la deuxième à la ligne d’arrivée.

N’hésitez pas à faire une pause ici et à modifier les valeurs de votre côté afin de bien assimiler les mécanismes de positionnement !

Note : on peut également passer des noms de lignes aux propriétés ci-dessus plutôt que des numéros dans le cas où on a nommé les lignes de notre grille.

Positionner les éléments à partir d’une zone prédéfinie

La deuxième manière de positionner des éléments dans une grille est de définir des zones de grille et d’attribuer les zones aux différents éléments de grille.

Pour faire cela, nous allons utiliser la propriété grid-area avec nos éléments de grille. Cette propriété va pouvoir être utilisée de deux façons différentes :

• En propriété ultra raccourcie des précédentes ; en lui passant 4 valeurs qui correspondent aux valeurs de row-start, column-start, row-end et column-end. Cela permet de définir immédiatement une zone de grille dans laquelle sera positionné l’élément ;
• En lui passant un nom de zone qui va pouvoir être utilisé par la propriété grid-template-areas.

La propriété grid-template-areas va utiliser les noms définis avec grid-area et indiquer la place dans la grille qui va être liée à chaque nom. Grosso-modo, cette propriété va nous permettre de construire visuellement une grille à partir des noms de zones définis avec grid-area.

Les grilles vont être construites rangée par rangée. Chaque répétition d’un nom de grid-area indique que la zone doit englober une cellule de plus. Les zones non rectangulaires ne sont pour le moment pas autorisées. Un point indique une cellule vide (sans zone attribuée).

Regardez plutôt l’exemple ci-dessous. Cette propriété se comprend beaucoup mieux visuellement.

Code HTML :

See the Pen
CSS Grid Layout 5 : grid-area & grid-template-areas by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
CSS Grid Layout 5 : grid-area & grid-template-areas by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
CSS Grid Layout 5 : grid-area & grid-template-areas by Pierre (@pierregiraud)
on CodePen.

Ici, nous possédons une grille à 3 colonnes, 3 rangées, et possédant 3 éléments. On commence par définir une zone pour chaque élément avec grid-area.

Ensuite, on utilise grid-template-areas sur le conteneur afin d’indiquer quelles cellules de grille ces zones doivent couvrir. Chaque paire de guillemets droits indique une nouvelle ligne dans la grille. Chaque répétition de nom indique une nouvelle cellule que la zone doit couvrir.

Ici, par exemple, on commence par écrire "zone1 zone1 zone1". Cela signifie que la zone « zone1 » devra couvrir la première, la deuxième et la troisième cellule de la première rangée.

Ensuite, on a ". . zone3". Cela signifie que les deux premières cellules de la deuxième rangée ne sont pas liées à des noms de zone tandis que la zone « zone3 » devra couvrir la troisième.

Enfin, on écrit ". zone2 zone3". La première cellule de la troisième rangée n’est liée à aucune zone, la zone « zone2 » couvrira la deuxième tandis que la zone « zone3 » couvrira la troisième.

Notez qu’on peut également utiliser la propriété raccourcie grid-template qui permet de définir en une seule fois les valeurs des propriétés grid-template-rows, grid-template-columns et grid-template-areas.

Aligner les éléments de grille dans une grille CSS

Une fois les éléments positionnées dans la grille, on va encore pouvoir les aligner dans la zone qui leur a été attribuée.

L’alignement des éléments va pouvoir se faire dans le sens vertical et dans le sens horizontal par rapport aux pistes de la grille ; c’est l’un des atouts principaux du modèle des grilles.

De plus, l’alignement des éléments va pouvoir se faire au niveau du conteneur (pour aligner tous les éléments selon un même modèle) ou au niveau des éléments, de manière individuelle.

Aligner les éléments par rapport à l’axe de ligne : justify-items et justify-self

Les propriétés justify-items et justify-self vont nous permettre d’ aligner les éléments le long de l’axe inline du document.

Pour les langages latins, l’axe de ligne est l’axe horizontal (l’axe des rangées). Le « début » de cet axe sera pour nous le coin gauche et la « fin » sera le coin droit.

Cela peut être différent pour d’autres langages et peut être changé en modifiant les valeurs de la propriété writing-mode notamment.

Ces propriétés supportent les valeurs suivantes :

• stretch : L’élément ou les éléments vont s’étendre pour occuper toute leur zone. C’est la valeur par défaut ;
• start : L’élément ou les éléments seront alignés contre le « début » de leur zone ;
• end : L’élément ou les éléments seront alignés contre la fin de leur zone ;
• center : L’élément ou les éléments seront centrés dans leur zone.

See the Pen
CSS Grid Layout 6 : justify-items & justify-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 6 : justify-items & justify-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 6 : justify-items & justify-self by Pierre (@pierregiraud)
on CodePen.

On définit ici deux grilles. On ne précise pas de justify-items ni de justify-self pour la première grille ; les valeurs par défaut (stretch) vont donc être utilisées.

On applique un justify-items : start à notre deuxième grille. Cela va faire en sorte que les éléments se placent au début de la zone qui leur est réservée (et n’occupent que la place nécessaire plutôt que de « stretch » c’est-à-dire s’étendre par défaut).

On définit également un justify-self : end pour le dernier élément de notre deuxième grille. Comme la propriété justify-self cible plus précisément que justify-items, elle sera traitée prioritairement et c’est la raison pour laquelle le dernier élément de la grille est aligné contre la fin de sa zone selon l’axe horizontal (c’est-à-dire à droite).

Aligner les éléments par rapport à l’axe de bloc : align-items et align-self

On va de la même façon pouvoir aligner les éléments de grille selon l’axe de bloc ou axe des colonnes qui sera pour nous l’axe vertical grâce aux propriétés align-items et align-self.

Ces propriétés vont s’utiliser exactement comme les précédentes et on va pouvoir leur passer les mêmes valeurs start, end, center et stretch (valeur par défaut). Le « début » de l’axe sera pour nous le bord supérieur tandis que la fin sera le bord inférieur.

See the Pen
CSS Grid Layout 7 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 7 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 7 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

Notez bien ici que les éléments sont toujours alignés au sein de la zone qui leur est réservée. Ainsi, si nos éléments n’occupent qu’une seule rangée de la grille par exemple, ils seront alignés dans l’espace de cette rangée et de même pour les colonnes.

Dans notre exemple, nous ne donnons aucune consigne de positionnement à nos éléments (positionnement qui dépend des propriétés grid-column et grid-row, etc.). Chaque élément occupe donc une cellule de grille par défaut (un espace d’une colonne * une rangée).

C’est la raison pour laquelle le troisième élément de notre deuxième grille qui possède un align-self : end n’est pas collé contre le bord inférieur de la grille mais simplement contre le bord inférieur de la rangée à laquelle il appartient.

Aligner les éléments de grille par rapport aux axes de bloc et en ligne : place-items et place-self

Le modèle des grilles nous fournit également des propriétés raccourcies qui nous permettent d’aligner un ou les éléments de grille par rapport aux deux axes d’un coup.

Ces propriétés sont les propriétés CSS place-items et place-self.On va pouvoir leur passer une première valeur qui va définir le comportement de align-{items | self} et une deuxième qui définira le comportement de justify-{items | self}. On peut également ne préciser qu’une valeur qui sera alors utilisée pour l’alignement sur les deux axes.

See the Pen
CSS Grid Layout 8 : place-items & place-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 8 : place-items & place-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 8 : place-items & place-self by Pierre (@pierregiraud)
on CodePen.

On utilise ici place-items pour réaliser très simplement un centrage parfait des éléments de grille par rapport à leur zone. Notez qu’on utilise cette fois-ci une grille qui possède 3 colonnes et une seule rangée.

Le troisième élément possède un place-self : start end. Il sera aligné au début de sa zone selon l’axe vertical (= en haut) et à la fin selon l’axe horizontal (= à droite).

Aligner le contenu de la grille par rapport au conteneur de grille : justify-content & align-content

Il arrive parfois que l’ensemble des éléments qui constituent une grille ait une taille inférieure à celle du conteneur de grille.

Cela peut se produire notamment dans le cas où on aurait défini des valeurs de taille fixes pour les pistes de grille.

Imaginez par exemple que l’on crée une grille avec display : grid de trois colonnes et une rangée en indiquant que chaque colonne doit faire 150px de large et chaque rangée 100px de haut.

Dans ce cas, notre grille aura une taille de 450px * 100px. Cependant, le conteneur de grille va lui occuper tout l’espace disponible dans son élément parent et va donc pouvoir être plus grand que ce qu’il contient. De même, l’unique rangée de la grille va faire 100px de hauteur mais le conteneur peut avoir une hauteur plus grande.

Dans ces cas-là, on va pouvoir aligner l’ensemble de la grille dans le conteneur de grille avec les propriétés justify-content et align-content.

La propriété justify-content permet un alignement selon l’axe de ligne ou axe des rangées qui est pour nous l’axe horizontal tandis que align-content permet un alignement selon l’axe de bloc ou axe des colonnes qui correspond pour nous à l’axe vertical.

Ces deux propriétés supportent les mêmes valeurs qui sont les suivantes :

• start : la grille sera alignée contre le début de son conteneur selon l’axe correspondant ;
• end : la grille sera alignée contre la fin de son conteneur selon l’axe correspondant ;
• center : la grille sera centrée dans son conteneur selon l’axe correspondant ;
• stretch : redimensionne les pistes de grille afin qu’elles occupent tout l’espace dans le conteneur dans l’axe correspondant ;
• space-around : répartit équitablement l’espace disponible entre les différentes pistes dans l’axe correspondant. 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-between : répartit équitablement l’espace disponible entre les différentes pistes dans l’axe correspondant mais ne laisse pas d’espace entre les bords du conteneur et la première / dernière piste ;
• space-evenly : répartit équitablement l’espace disponible entre les différentes pistes dans l’axe correspondant ;

See the Pen
CSS Grid Layout #9 : justify-content &align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #9 : justify-content &align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #9 : justify-content &align-content by Pierre (@pierregiraud)
on CodePen.

Ici, on crée 3 grilles de 3 colonnes, 2 rangées et on définit des tailles fixes pour nos colonnes (150px de large) et nos rangées (25px de haut). Pour cet exemple, on définit également des tailles fixes minimales de 500px * 100px pour le conteneur.

Notre première grille est notre grille témoin. On ne lui applique aucune propriété.

On applique un justify-content : center et align-content : end à notre deuxième grille. Cela signifie que la grille va venir se centrer dans son conteneur selon l’axe de ligne (l’axe horizontal) et va venir se coller à la fin du conteneur selon l’axe de bloc (l’axe vertical). Elle sera donc au milieu en largeur, et en bas dans la hauteur.

On applique un justify-content : space-between et align-content : space-evenly à notre troisième grille.

La valeur justify-content : space-between va répartir équitablement l’espace restant selon l’axe de ligne (horizontal) entre les colonnes en ne laissant aucun espace entre la première / dernière colonne et le bord du conteneur.

La valeur align-content : space-evenly va répartir équitablement l’espace restant selon l’axe de bloc (vertical) entre les rangées de la grille.

Notez qu’on peut également utiliser la propriété raccourcie place-content pour définir les valeurs de align-content et justify-content d’un coup.

&nbsp ;

Définir la largeur de l’espace entre deux colonnes ou entre deux rangées de grille : row-gap et column-gap

Précédemment, nous avons vu comme créer des grilles, définir des colonnes et des rangées, positionner et aligner des éléments de grille et comment aligner une grille dans son conteneur.

Souvent, lorsqu’on crée une page, on voudra ajouter de l’espace entre différentes colonnes ou rangées d’une grille pour aérer la grille et faire en sorte que les éléments ne soient pas forcément tous collés les uns aux autres.

On va pouvoir pour cela utiliser les propriétés row-gap et column-gap qui permettent de définir la taille des « gouttières » de la grille c’est-à-dire la taille des espaces entre les rangées et entre les colonnes.

See the Pen
CSS Grid Layout #10 : row-gap & column-gap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #10 : row-gap & column-gap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #10 : row-gap & column-gap by Pierre (@pierregiraud)
on CodePen.

Notez qu’on peut également utiliser la propriété raccourcie gap pour définir les valeurs de row-gap et column-gap d’un coup.

Gestion des éléments implicites des grilles

Gérer la taille des colonnes et des rangées implicites : grid-auto-columns et grid-auto-rows

Si un élément de grille est positionné dans une rangée ou une colonne qui n’est pas dimensionnée de manière explicite avec grid-template-rows ou grid-template-columns, des pistes de grille implicites sont créées pour le contenir.

Les pistes implicites sont créées lorsqu’il y a plus d’éléments de grille que de cellules dans la grille (auquel cas un algorithme de placement automatique va créer des rangées ou des colonnes supplémentaires) ou lorsqu’un élément de grille est placé en dehors de la grille explicite.

On va pouvoir définir des tailles souhaitées pour ces pistes implicites grâce aux propriétés grid-auto-columns et grid-auto-rows.

Notez que si plusieurs tailles de piste sont données, le modèle est répété autant de fois que nécessaire pour déterminer la taille des pistes implicites. La première piste de grille implicite reçoit la première taille spécifiée, et ainsi de suite.

See the Pen
CSS Grid Layout #11 : grid-auto-columns & grid-auto-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #11 : grid-auto-columns & grid-auto-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #11 : grid-auto-columns & grid-auto-rows by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée deux grilles possédant deux colonnes et deux rangées définies de manière explicite. Nos deux grilles contiennent six éléments, c’est-à-dire deux éléments de plus que de cellules. Des pistes implicites vont donc être créées.

Dans notre première grille, nous ne donnons pas d’instruction de placement des éléments. Chaque élément va occuper une cellule et une troisième rangée va être créée implicitement pour accueillir les deux éléments « en trop ».

Dans notre deuxième grille, en revanche, nous plaçons des éléments en dehors des pistes explicites de la grille. Des pistes vont donc être créées implicitement selon le modèle fourni par grid-auto-columns dans ce cas puisque nous avons placé nos éléments dans des colonnes qui n’ont pas été définies explicitement.

Gérer le positionnement des éléments positionnés automatiquement : grid-auto-flow

Les éléments de grille qui ne sont pas explicitement placés sont automatiquement placés dans un espace inoccupé du conteneur de grille par un algorithme de placement automatique.

La propriété grid-auto-flow nous permet de contrôler le fonctionnement de l’algorithme de placement automatique, en spécifiant exactement comment les éléments placés automatiquement sont transférés dans la grille. Elles accepte les valeurs suivantes :

• row (valeur par défaut) : indique à l’algorithme de placement automatique de remplir les rangées les unes après les autres en créant de nouvelles rangées au besoin ;
• column : indique à l’algorithme de placement automatique de remplir les colonnes les unes après les autres en créant de nouvelles colonnes au besoin ;
• dense : indique à l’algorithme de placement automatique de tenter de combler les trous déjà présents dans la grille si des éléments plus petits apparaissent plus tard.

See the Pen
CSS Grid Layout #12 : grid-auto-flow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #12 : grid-auto-flow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #12 : grid-auto-flow by Pierre (@pierregiraud)
on CodePen.

Notation raccourcie : la propriété grid

La propriété grid est une propriété raccourcie qui permet de définir les valeurs pour grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, et grid-auto-flow dans une seule déclaration.

Attention : on ne pourra spécifier que des propriétés liés aux éléments explicites ou que des propriétés liées aux éléments implicites au sein d’une seule déclaration grid.

Résumé : liste des propriétés des grilles CSS

Nous allons pouvoir trier par ordre alphabétique et par valeur numérique, dans l’ordre ascendant (croissant) ou descendant (décroissant).

Créer un tri dynamique en JavaScript – Partie HTML et ressources utilisées

Commençons par créer un tableau structuré en HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tri JavaScript</title>
    <script src="tri.js" async></script>
    <style>
        table{border-collapse: collapse}
        th,td{border: 1px solid black;padding: 10px 20px}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Prénom</th>
                <th>Age</th>
                <th>Abonné</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Pierre</td>
                <td>29</td>
                <td>oui</td>
            </tr>
            <tr>
                <td>Mathilde</td>
                <td>027</td>
                <td>false</td>
            </tr>
            <tr>
                <td>3Ric</td>
                <td></td>
                <td>??</td>
            </tr>
            <tr>
                <td>Florian</td>
                <td>trente</td>
                <td>01</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Notre tableau contient ici une ligne d’en-tête en 5 lignes de données. Nous allons vouloir pouvoir trier les cellules de chaque colonne en cliquant simplement sur la cellule d’en-tête correspondante. Bien évidemment, on va également vouloir que lors du tri le reste des lignes suive les cellules de la colonne triée.

En JavaScript, la meilleure façon de faire actuellement de être de :

1. Récupérer les valeurs du tableau dynamiquement ;
2. Comparer les cellules de la colonne triée deux à deux et les ordonner comme cela les unes après les autres ;
3. Réinjecter les résultats dans la page en créant un nouveau tableau qui viendra remplacé le précédent.

Pour cela, nous allons utiliser les méthodes suivantes :

• Les méthodes querySelector() et querySelectorAll() qui nous permettent de récupérer des éléments spécifiques dans le DOM ;
• La méthode AddEventListener() qui permet d’accrocher un gestionnaire d’événements à un élément ;
• La fonction isNaN() qui indique si une valeur est un nombre (true) ou pas (false) ;
• La méthode toString() qui renvoie une chaine de caractères à partir d’un objet ;
• La méthode localeCompare() qui renvoie un nombre indiquant si la chaîne de caractères courante se situe avant (nb négatif), après (nb positif) ou est la même que la chaîne passée en paramètre (0), selon l’ordre lexicographique.
• La méthode forEach() qui permet d’exécuter une fonction donnée sur chaque élément du tableau ;
• La méthode Array.from() qui permet de créer une nouvelle instance d’Array (une copie superficielle) à partir d’un objet itérable ou semblable à un tableau.
• La méthode sort() qui trie les éléments d’un tableau, dans ce même tableau, et renvoie le tableau ;
• La méthode indexOf() qui renvoie le premier indice pour lequel on trouve un élément donné dans un tableau ou -1.

On va également avoir besoin des propriétés suivantes :

• La propriété children (lecture seule) qui renvoie une HTMLCollection contenant tous les enfants Element du noeud sur lequel elle a été appelée ;
• La propriété textContent qui représente le contenu textuel d’un nœud et de ses descendants.

Créer un tri dynamique en JavaScript – Script JavaScript

Comme l’exercice est relativement complexe, on va procéder par itération en créant d’abord un grand schéma de ce qu’on souhaite obtenir et en complétant au fur et à mesure.

Création d’une première ébauche de tri

On sait qu’il va falloir qu’on classes les différentes lignes de notre tableau en fonction de la valeur des cellules d’une colonne donnée. On va donc déjà commencer par accéder à nos éléments tbody, th et tr. Pour cela, on peut écrire :

const tbody = document.querySelector('tbody');
const thx = document.querySelectorAll('th');
const trxb = tbody.querySelectorAll('tr');

La méthode querySelectorAll() renvoie une NodeList d’éléments correspondant au sélecteur passés contenus dans le document ou qui sont des descendants de l’élément sur lequel la méthode a été appelée. tbody.querySelectorAll('tr') renvoie donc une liste des noeuds éléments tr contenus dans tbody par exemple.

Notez déjà qu’il est possible d’itérer sur (de parcourir) une NodeList avec forEach() et qu’on peut également convertir une NodeList en tableau avec la méthode Array.from().

En plus de cela, les éléments de notre NodeList contiennent des propriétés cells et children qui peuvent nous permettre d’accéder à une HTMLCollection des éléments qu’ils contiennent.

Ensuite, on veux que le tableau soit trié dans l’ordre croissant ou décroissant des valeurs en fonction d’une colonne dès qu’un utilisateur clique sur la cellule d’en-tête de cette colonne. On va donc utiliser un évènement de type click et utiliser une fonction de retour qui va devoir faire le travail.

Commençons déjà par accrocher un gestionnaire d’évènement click à chacun de nos th. On peut écrire quelque chose comme ça :

thx.forEach(th => th.addEventListener('click', () =>{
   /*Code à créer*/
}));

Notez bien ici que les th du code ci-dessus ne sont que des variables : je pourrais leur donner n’importe quel nom. L’idée est que forEach() va exécuter un code pour chaque élément de l’Array / la NodeList sur lequel on l’appelle. thx est composé des th de notre tableau; forEach() va donc ici accrocher des gestionnaires d’évènements à chaque élément th.

Le code au dessus utilise des fonctions fléchées qui sont une notation récente du JavaScript. L’équivalent avec des fonctions anonymes serait :

thx.forEach(function(th) { 
    th.addEventListener('click', function() {
       /*Code à créer*/
    });
});

Lorsqu’un utilisateur clique sur une cellule d’en-tête, il va falloir qu’on classe / ordonne les différentes lignes du tableau et qu’on remplace le tableau de base par le nouveau tableau ordonné.

Pour classer les lignes du tableau, on va utiliser la méthode sort(). Par défaut, cette méthode va trier les valeurs en les convertissant en chaines de caractères et en comparant ces chaines selon l’ordre des points de code Unicode. Cette méthode ne nous convient pas puisqu’elle n’est efficace que pour trier des chaines qui ont des formes semblables (tout en minuscule ou tout en majuscule).

Heureusement, sort() peut prendre en argument facultatif une fonction de comparaison qui va décrire la façon dont les éléments vont être comparés, ce qui va nous être très utile ici. Cette fonction de comparaison va toujours devoir renvoyer un nombre en valeur de retour qui va décider de l’ordre de tri.

Par exemple, si v1 et v2 sont deux valeurs à comparer, alors :

• Si fonctionDeComparaison(v1, v2) renvoie une valeur strictement inférieure à 0, v1 sera classé avant v2 ;
• Si fonctionDeComparaison(v1, v2) renvoie une valeur strictement supérieure à 0, v2 sera classé avant v1 ;
• Si fonctionDeComparaison(v1, v2) renvoie 0, on laisse v1 et v2 inchangés l’un par rapport à l’autre, mais triés par rapport à tous les autres éléments.

Pour réinjecter le résultat, on va utiliser forEach() et appendChild().

Notre gestionnaire d’évènements va donc ressembler à cela :

thx.forEach(th => th.addEventListener('click', () =>{
    let classe = Array.from(trxb).sort(compare(a,b));
    classe.forEach(tr => tbody.appendChild(tr));
}));

La méthode sort() a besoin d’un Array (ou d’un array-like) pour fonctionner. On utilise donc Array.from(trbx) pour créer un Array à partir de notre NodeList.

Ensuite, pour chaque élément du tableau classé, on utilise appendChild qui va insérer les tr les unes à la suite des autres.

Voilà tout pour le squelette. La vraie difficulté va maintenant être de savoir ce qu’on va mettre dans notre fonction compare().

Création de la fonction de tri avec critères personnalisés

Pour le moment, on passe un Array complexe composé d’objets à sort(). En effet, Array.from(trxb) crée un Array composé des différents tr de notre tbody et ces tr sont des objets (noeuds) eux mêmes composés de (noeuds) td eux mêmes composés de (noeuds) texte.

La méthode sort() transmet ainsi ici automatiquement les différents éléments de Array.from(trxb) (c’est-à-dire les différents tr) à la fonction compare() passée en argument.

Or, comparer des lignes de tableau deux à deux n’a pas de sens : on veut comparer les valeurs textuelles des td d’une colonne donnée entre les différentes lignes du tableau pour ensuite pouvoir ordonner les lignes entières dans un sens ou dans un autre.

On va donc ici vouloir passer explicitement l’indice du th lié à la colonne actuellement cliqué afin de définir la colonne de référence utilisée pour le tri ainsi qu’un booléen qui va nous permettre d’inverser le tri (croissant / décroissant) à chaque fois qu’un élément d’en-tête sera cliqué (note : par simplicité, les éléments d’en-tête agissent comme un groupe ici et non pas indépendamment).

On va faire tout cela de la façon suivante :

thx.forEach(th => th.addEventListener('click', () =>{
    let classe = Array.from(trxb).sort(compare(Array.from(thx).indexOf(th), this.asc = !this.asc));
    classe.forEach(tr => tbody.appendChild(tr));
}));

La partie Array.from(thx).indexOf(th) nous permet de récupérer l’indice du th couramment cliqué. On va se servir ensuite de cet indice pour savoir quelles valeurs comparer dans chaque tr.

La partie this.asc = !this.asc permet de définir un booléen dont la valeur logique va être inversée à chaque clic sur un élément d’en-tête. Avant le premier clic, this.asc n’est pas défini (et vaut donc false). Lors du premier clic, sa valeur s’inverse et il vaut donc true et etc. Cela va nous permettre ensuite de choisir l’ordre de tri.

Passons maintenant à notre fonction de comparaison en soi. Notre fonction compare() va devoir retourner une fonction qui va recevoir en arguments valeurs passées par sort() (c’est-à-dire nos lignes de tableau) et retourner un nombre positif, négatif ou égal à 0 afin d’indiquer à sort() comment les lignes doivent être triées. L’architecture de notre fonction va donc ressembler à :

const compare = (ids, asc) => (row1, row2) => /*Un nombre*/

L’équivalent avec des notations plus traditionnelles est :

const compare = function(ids, asc){
    return function(row1, row2){
       return /*Un nombre*/;
    }
}

L’idée principale de notre fonction de comparaison est la suivante : on va vouloir obtenir le contenu textuel des cellules de la colonne utilisée pour le tri pour les deux lignes passées par sort() et on va vouloir comparer ces deux valeurs textuelles puis renvoyer un nombre à l’issue de cette comparaison pour indiquer à sort() l’ordre de tri.

Notre fonction de comparaison va déjà devoir comparer les valeurs textuelles des td d’une colonne pour deux lignes différentes pour ensuite pouvoir ordonner les lignes. Il va donc falloir accéder à ces valeurs textuelles. On va pour cela créer une autre fonction qui va prendre une ligne et un numéro de colonne en entrée et qui va extraire le contenu textuel de la cellule de tableau relative à l’id passé dans cette ligne.

const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
   /*Un nombre*/

L’équivalent en fonctions non fléchées est :

const compare = function(ids, asc){
    return function(row1, row2){
       const tdValue = function(row, ids){
           return row.children[ids].textContent;
       }
       return /*Un nombre*/
    }
}

Maintenant qu’on possède une fonction nous permettant de récupérer le contenu textuel des td, il ne nous reste plus qu’à créer une comparaison qui va comparer ces deux valeurs textuelles. On peut faire cela en utilisant des ternaires :

const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
    const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2);
    /*Un nombre*/
};

L’équivalent de cette notation condensée avec des boucles classiques et des fonctions non fléchées est :

const compare = function(ids, asc){
    return function(row1, row2){
       const tdValue = function(row, ids){
           return row.children[ids].textContent;
       }
       const tri = function(v1, v2){
           if (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
              return v1 - v2;
           }
           else {
              return v1.toString().localeCompare(v2);
           }
           return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2);
       };
       return /*Un nombre*/
   }
}

Ici, v1 et v2 représentent le contenu textuel des cellules des deux lignes pour une colonne donnée. On veut d’abord traiter deux cas : le cas où les cellules contiennent des nombres et le cas où elles contiennent autre chose que des nombres.

Dans le cas où nos deux valeurs sont bien des nombres, on se contente de retourner la différence entre les deux valeurs.

Il faut savoir ici que lorsqu’on passe un argument qui n’est pas du type Number à isNan(), cet argument est d’abord converti de force en une valeur de type Number et c’est la valeur résultante qui est utilisée pour déterminer si l’argument est NaN ou pas.

isNan() va notamment renvoyer true pour les valeurs booléennes true et false et pour la chaine de caractères vide. On va donc isoler le cas “chaine de caractères vide”. Comme les valeurs récupérées dans le tableau seront transformées en chaine, on n’a pas besoin d’isoler les cas true et false.

Pour tous les cas qui ne rentrent pas dans notre if, on va comparer les deux valeurs avec la méthode localeCompare(). Si la valeur v2 est considérée comme se situant après dans l’ordre lexicographique par rapport à v1 par localeCompare(), cette méthode renverra un nombre négatif. Dans le cas contraire, un nombre positif sera renvoyé.

En résumé, dans notre if comme dans notre else, si v2 est “plus grand” que v1 , une valeur négative est retournée. Dans le cas contraire, une valeur positive est retournée. Si les deux valeurs sont égales, 0 est retourné.

Il ne nous reste plus alors qu’à passer des valeurs textuelles effectives à notre fonction tri() en tenant compte de l’ordre de tri choisi (croissant ou décroissant). On peut écrire :

const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
    const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
};

Ou l’équivalent en “version longue” :

const compare = function(ids, asc){
    return function(row1, row2){
        const tdValue = function(row, ids){
            return row.children[ids].textContent;
        }
        const tri = function(v1, v2){
            if (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
               return v1 - v2;
            }
            else {
               return v1.toString().localeCompare(v2);
            }
            return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
        };
        return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
    }
};

Décortiquons cette dernière ligne de code ensemble. Cette ligne est relativement condensée et contient deux ternaires. La partie tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids) permet de récupérer le contenu textuel d’une cellule de la première ligne puis le contenu textuel d’une cellule de la deuxième ligne ou inversement selon que asc soit évalué à true ou pas.

Grosso modo, on va exécuter tdValue(row1, ids) et tdValue(row2, ids) si asc vaut true ou tdValue(row2, ids) et tdValue(row1, ids) si asc vaut false.

Les deux résultats renvoyés par tdValue() (les valeurs textuelles des deux cellules donc) sont ensuite immédiatement passées comme arguments à tri() qui va les comparer et renvoyer un nombre. En fonction de si le nombre est positif, négatif ou égal à 0 la méthode sort() va finalement ordonner les lignes dans un sens ou dans un autre.

Ici, notre ternaire nous permet finalement de choisir quelle valeur textuelle va être utilisée en v1 et quelle autre va être utilisée en v2, ce qui va influer sur le résultat final.

Si asc vaut true, la valeur textuelle de la première colonne sera utilisée comme v1 et la valeur textuelle de la deuxième colonne sera utilisée comme v2.

Or, on a dit plus haut que si v2 est “plus grand” que v1 , une valeur négative est retournée par tri(). Notre fonction compare() renvoie donc dans ce cas une fonction function(row1, row2) qui renvoie elle même une valeur négative.

La ligne Array.from(trxb).sort(compare(Array.from(thx).indexOf(th), this.asc = !this.asc) va donc devenir Array.from(trxb).sort(function(row1, row2){return /*Une valeur négative*/} et dans ce scénario sort() va classer row1 avant row2.

On a donc finalement réalisé un tri fonctionnel en JavaScript, qui permet de comparer et de classer différents types de valeurs !

Voici le code complet en version longue :

See the Pen
Tuto – Trier un tableau HTML en JavaScript [développé] by Pierre (@pierregiraud)
on CodePen.

Et le voici en version factorisé :

See the Pen
Tuto – Trier un tableau HTML en JavaScript [condensé] by Pierre (@pierregiraud)
on CodePen.