Grille

 

Tutoriel : les grilles CSS

Présentation générale des grilles.

Introduite en CSS3 la notion de grille est conçue pour faciliter les mises en page complexes. Une grille se présente comme un tableau, avec des cellules organisées en lignes et en colonnes. Toutefois, par rapport à l'antique balise table, la grille présente plusieurs avantages :

• La syntaxe HTML est plus simple : l'imbrication des balises se fait sur seulement deux niveaux : le container et les éléments de la grille.
• Il est plus facile de gérer la largeur des colonnes, la hauteur des lignes et l'espacement entre les cellules, et ceci en restant responsive.

La balise table garde son utilité lorsqu'il s'agit d'afficher un vrai tableau, mais on ne l'utilisera plus pour structurer la page. De même les éléments flottants (propriétés float et clear) n'ont plus d'avantage à être utilisés pour structurer la page.

Pour construire une grille il vous faut un élément container, celui-ci aura sa propriété display fixée à grid ou à inline-grid. Tous ses enfants directs seront alors des cellules sans qu'il soit nécessaire de le préciser.

On définira ensuite le nombre et les dimensions des lignes et des colonnes avec les propriétés grid-template-columns et grid-template-rows. Et c'est suffisant pour un premier résultat : tous les éléments enfant de ce container vont se ranger dans la grille dans l'ordre où ils sont énumérés.

Remarque. Internet Explorer présente de nombreux problèmes de compatibilité en ce qui concerne les grille : certaines propriétés sont différentes, le placement automatique des cellules n'est pas pris en charge, etc.

  

1

2

3

4

5

6

7

8

9

10

 

Positionner les éléments dans la grille.

Par défaut les éléments enfant se positionnent chacun dans les cellules suivant leur ordre d'arrivée. Mais les propriétés grid-column et grid-row permettent de positionner un élément à un emplacement précis de la grille. Il est donc possible de remplir la grille dans un ordre quelconque. Par ailleurs, ces deux propriétés permettent aussi d'étendre un élément sur plusieurs colonnes ou plusieurs lignes.

 

1

2

3

4

5

6

7

8

9

10

Dans l'exemple ci-dessus, l'ordre de placement normal a été modifié par l'usage des propriétés grid-column et grid-row :

• L'élément numéro 2 (bleu) a été forcé en colonne 3. Il laisse donc une cellule vide avant lui.
• L'élément numéro 3 (vert) a été étendu sur deux colonnes.
• L'élément numéro 5 (rose) a été étendu sur 2 lignes.
• Les autres éléments n'ont pas d'indications de placement particulières : ils se positionnent dans la première cellule libre suivante.

On notera que les lignes et les colonnes sont numérotées à partir de 1. Pour faire chevaucher un élément sur plusieurs colonnes, on indique sa colonne de départ et la colonne sur laquelle il vient buter. Il en est de même pour faire chevaucher un élément sur plusieurs lignes.

Conclusion.

Les grilles sont conçues pour construire des mises en page complexes. Elles peuvent remplacer avantageusement les tableaux et les éléments flottants qui, faute de mieux, étaient employés à cet usage. Le template bootstrap (qui a d'ailleurs inspiré les grilles CSS) perd lui aussi beaucoup de son intérêt.

Il ne reste plus qu'à vous familiarisez avec les quelques propriétés relatives aux grilles.

Voir aussi...

Grilles - Propriétés.

• align-content : Disposition des lignes dans un flex-box ou une grille.
• align-items : Disposition verticale des éléments dans un flex-box ou une grille.
• align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
• grid-area : Positionne un élément dans une zone nommée de la grille.
• grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
• grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
• grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
• grid-column : Numéro de colonne(s) d'un élément dans une grille.
• grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
• grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
• grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
• grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
• grid-row : Numéro des lignes d'un élément dans une grille.
• grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
• grid-row-gap : Ajuste l'espacement des lignes dans une grille.
• grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
• grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
• grid-template-areas : Définition de zones nommées dans une grille
• grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
• grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
• justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
• justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
• justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

• minmax() : Renvoie une valeur comprise dans une fourchette.
• repeat() : Répète une valeur un certain nombre de fois.