Définir des grilles CSS : Le guide complet – CSS Grid Layout

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