La mise en page en grille CSS3

1. Les navigateurs

Malgré son statut de Candidate Recommendation, ce module est pour le moment très peu reconnu par les principaux navigateurs. Voici ce que nous en dit Can I Use :

Seuls les navigateurs de Microsoft reconnaissent ce module ! Mais le passage en Candidate Recommendation devrait très vite faire évoluer l’implémentation de ce module dans les autres navigateurs, n’en doutons pas. C’est pour cela qu’il est important d’acquérir cette technique dès maintenant.

2. Forcer la reconnaissance

Malgré tout, vous allez pouvoir utiliser vos navigateurs préférés. Nous allons "forcer" la reconnaissance de ce module. Attention, cela doit être clair pour vous, nous n’allons pas utiliser les navigateurs standards, nous allons utiliser les navigateurs dans une configuration spéciale qui vous permettra de tester et d’utiliser le module Grid Layout pour vous et uniquement pour vous. Les visiteurs de vos sites n’auront pas ces versions.

3. Google Chrome

La ligne Fonctionnalités expérimentales de la plate-forme Web est surlignée.

1. Les largeurs fixes des colonnes

Dans ce premier exemple, nous allons créer une grille régulière sur 2 lignes et 3 colonnes.

Nous utilisons une boîte <div id="grille"> pour définir le conteneur avec la propriété display: grid. Avec la propriété grid-template-columns, nous indiquons les largeurs voulues pour chaque colonne. La première valeur correspond à la première colonne, la deuxième valeur correspond à la deuxième colonne et ainsi de suite.

Dans ce premier exemple, les valeurs sont exprimées en pixels, elles sont donc fixes.

Voici les CSS :

<style>  
     #grille {  
          display: grid;  
          grid-template-columns: 200px 400px 200px;  
          border: solid 1px #000;  
     }  
</style>  
Voici la structure HTML :  
<div id="grille">  
    <p>Praesent commodo...</p>  
    <p>Maecenas faucibus...</p>  
    <p>Fusce dapibus, tellus...</p>  
    <p>Nulla vitae elit libero...</p>  
    <p>Donec id elit non mi...</p>  
    <p>Duis mollis, est non commodo...</p>  
</div>
 

Les éléments immédiatement enfants du conteneur, les paragraphes <p>, sont automatiquement affectés d’items de la grille. Ils sont donc...

1. Nommer toutes les cellules

Dans les exemples précédents, les items de la grille se plaçaient automatiquement dans les cellules, selon l’ordre des déclarations. Nous allons à présent pouvoir nommer toutes les cellules de la grille et y placer l’item de grille que nous voulons.

Voici la structure HTML :

<div id="grille">  
    <p class="p1">P1. Praesent commodo...</p>  
    <p class="p2">P2. Maecenas faucibus...</p>  
    <p class="p3">P3. Fusce dapibus...</p>  
    <p class="p4">P4. Nulla vitae...</p>  
    <p class="p5">P5. Donec id...</p>  
    <p class="p6">P6. Duis mollis...</p>  
</div>
 

Nous avons six paragraphes utilisant chacun une classe dédiée : .p1 pour le premier paragraphe, p2 pour le deuxième, et ainsi de suite. Pour mieux repérer le placement des items, chaque paragraphe commence par P1., P2....

Voici les règles CSS :

<style>  
     #grille {  
          display: grid;  
          grid-template-columns: 300px 300px 300px;  
          grid-template-areas:    "C1 C2 C3"  
                                        "C4 C5 C6";  
          border: solid 1px #000;  
     }  
     .p1 {  
          grid-area: C3;  
     }  
     .p2 {  
          grid-area: C5;  
     }  
     .p3 {  
          grid-area: C6;  
     }  
     .p4...

1. La justification dans les colonnes

La propriété justify-items permet de gérer la justification des contenus dans les colonnes de la grille. Les contenus peuvent utiliser ces valeurs :

Pour ce premier exemple, la justification est centrée. Voici les règles CSS :

<style>  
     #grille {  
          display: grid;  
          grid-template-columns: 300px 300px 300px;  
          justify-items: center;  
          border: solid 1px #000;  
     }  
     p {  
          background-color: #eee;  
          margin: 0;  
     }  
     .petit {  
          width: 150px;  
     }...

1. La justification horizontale

Si vous indiquez des largeurs fixes à vos colonnes, la largeur de la grille pourra être plus petite que la largeur du conteneur. Dans ce cas, nous pouvons gérer la justification horizontale de la grille dans le conteneur.

Dans cet exemple initial, nous avons une grille de trois colonnes à taille fixe et trois rangées. Cette grille possède une bordure épaisse de 5 pixels. Les items de grille sont des paragraphes qui ont une bordure et un fond coloré.

Voici les CSS utilisés :

<style>  
     #grille {  
          display: grid;  
          grid-template-columns: 200px 200px 300px;  
          border: solid 5px #000;  
     }  
     p {  
          margin: 0;  
          background-color: #eee;  
          border: solid 1px #000;  
     }  
</style>
 

Voici la structure HTML :

<div id="grille">  
    <p>Praesent commodo cursus magna...</p>  
   ...