Les grilles de mise en page

1. Les principaux termes

Dans la conception des mises en page en grille avec le module CSS Grid, toute une série de termes spécifiques est utilisée et il convient de bien les définir. Les deux premiers éléments, le conteneur de grille et ses enfants, sont directement liés à des éléments HTML.

Comme pour les mises en page flexibles, il faut un conteneur parent pour définir la grille. C’est le Grid Container en anglais, le conteneur de grille en français. Pour qu’un élément HTML devienne un conteneur de grille, il suffit que la propriété display: grid lui soit appliquée. Dans une même page web, il peut y avoir autant de conteneurs de grille que cela est nécessaire. Il est aussi possible d’imbriquer les grilles les unes dans les autres.

Dans un conteneur de grille, le ou tous les éléments directs inclus seront des éléments enfants de la grille. Ce ou ces enfants sont alors nommés Grid Items en anglais ou « éléments de grille » en français. Il faut noter qu’il s’agit uniquement des éléments directs inclus qui sont des éléments de la grille. Les petits-enfants du conteneur de grille ne sont pas affectés de la notion de grille. Ils conservent donc leur propriété de modèle de boîte.

Les paramètres de structure de la grille ne sont pas directement affectés à...

1. Le conteneur de la grille

Pour qu’un élément HTML soit considéré comme un conteneur de grille, il suffit d’utiliser la propriété et la valeur display: grid. Avec cette valeur, la grille utilise un affichage de type block.

Pour avoir un contexte de grille de mise en page, la seconde valeur possible pour la propriété display est inline-grid. Dans ce cas, s’il y a plusieurs conteneurs qui utilisent cette valeur, ils seront affichés les uns à côté des autres.

2. La déclaration des colonnes

Pour déclarer des colonnes dans la grille, il faut utiliser la propriété grid-template-columns. Cette propriété accepte deux valeurs : le nombre et la largeur des colonnes. Cette propriété a pour valeur initiale none.

Le nombre de valeurs indiquées détermine le nombre de colonnes et les valeurs définissent leur largeur respective. Il est parfaitement possible d’utiliser n’importe quelle unité et même d’indiquer plusieurs unités différentes au sein d’une même grille.

Voici la structure HTML de cet exemple :

<div id="conteneur">  
  <p><b>Un</b>. Maecenas faucibus mollis interdum...</p>  
  <p><b>Deux</b>. Fusce dapibus, tellus ac cursus commodo...</p> 
  <p><b>Trois</b>. Duis mollis, est non commodo luctus...</p>  
  <p><b>Quatre</b>. Nulla vitae elit libero, a pharetra augue...</p> 
  <p><b>Cinq</b>. Cras Parturient Dolor Magna. Vestibulum id ligula...</p> 
  <p><b>Six</b>. Vestibulum id ligula porta felis euismod semper...</p> 
</div> 

Voici la règle CSS appliquée à ce conteneur :

#conteneur {  
  /* Grille de mise en page */  
  display: grid;  
  grid-template-columns: 60% 40%;  
  /* Mise en forme */  
  width: 800px;  
  border: 1px solid #000;  
} 

La propriété grid-template-columns possède deux valeurs, il y aura donc deux colonnes. La première valeur indique une largeur relative de 60 % de la largeur...

1. Les positions des enfants dans la grille

Il faut savoir maintenant comment les navigateurs positionnent les éléments enfants dans une mise en page en grille. Et bien ce sont des algorithmes embarqués dans les navigateurs qui placent automatiquement les éléments enfants dans le conteneur de grille parent.

Voici la structure HTML d’un exemple simple :

<div id="conteneur">  
<p>Un</p>  
  <p>Deux</p>  
  <p>Trois</p>  
</div> 

Voici les règles CSS appliquées au conteneur de grille parent et aux paragraphes enfants :

#conteneur {  
  /* Grille de mise en page */  
  display: grid;  
  grid-template-columns: repeat(3,100px);  
  /* Mise en forme */  
  width: 450px;  
  border: 1px solid #000;  
}  
p {  
  margin: 0;  
} 

Il est explicitement indiqué qu’il y a trois colonnes de 100 pixels de large : grid-template-columns: repeat(3,100px)

Voici l’affichage obtenu :

Le conteneur parent a une largeur de 450 pixels, il peut donc parfaitement contenir trois éléments enfants de 100 pixels de large respectivement.

Maintenant un quatrième élément enfant est ajouté : <p>Quatre</p>, il reste de la place, 150 pixels pour être précis, pour positionner ce nouvel élément dans la même ligne. Mais voici l’affichage obtenu :

Le nouvel élément enfant se place sur une nouvelle ligne, car il est explicitement indiqué qu’il doit y avoir seulement trois colonnes. Donc le navigateur respecte ce choix et il affiche l’élément supplémentaire sur une nouvelle ligne.

S’il faut passer outre ce positionnement par défaut, il faut utiliser la propriété grid-auto-flow. Cette propriété accepte les valeurs suivantes :

Voici la règle CSS modifiée...

1. Les affichages responsives

Pour cet exemple d’application de mise en page avec le module Grid, la page sera créée avec une grille sur une colonne pour l’affichage sur smartphone, sur deux colonnes sur tablette et sur trois colonnes sur les écrans d’ordinateur.

Voici l’affichage obtenu sur smartphone, avec une grille sur une seule colonne :

Voici l’affichage obtenu sur tablette, avec une grille sur deux colonnes :

Et voici l’affichage obtenu sur grand écran, avec une grille sur trois colonnes :

2. La structure HTML de la grille

Voici la structure HTML de cet exemple :

<div id="conteneur">  
 <header>  
    <h1>Justo Mollis Ornare Pellentesque Inceptos</h1>  
  </header>  
  <section>  
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus...</p>  
  </section>  
  <article>  
    <h2>Duis mollis, est non commodo luctus...</h2>  
    <p>Vestibulum id ligula porta felis euismod semper...</p>  
    <p>Maecenas faucibus mollis interdum. Cum sociis natoque...</p>  
  </article>  
  <aside>  
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia...</p>  
  </aside>  
  <footer>  
    <p>Amet Tellus Vulputate Ligula Fusce</p>  
  </footer>  
</div> 

Le conteneur de grille est la boîte <div id="conteneur">. Cette dernière contient d’abord un en-tête avec l’élément <header>.

Ensuite, l’élément <section> s’affiche sous l’en-tête sur les smartphones et sur la gauche sur les tablettes et les grands écrans.

En ce qui concerne l’élément <article>, celui-ci s’affichera au milieu verticalement sur les smartphones et au centre horizontalement sur les tablettes et les grands écrans.

L’élément <aside> s’affichera sous l’article et avant le pied de page sur les smartphones...