Les grid en CSS¶

Divisions en grid¶

Nous avons vu qu'à la fin des années 90, début 2000, on utilisait beaucoup les tableaux pour le placement d'éléments dans une page. Or, avec le temps, le W3C a déconseillé cette façon de faire au profit de balises de blocs ayant une signification propre.

La difficulté avec les blocs est que le positionnement des éléments à l'aide du CSS peut être fastidieux.

Arrive la notion de grille (grid).

Le grid est une façon CSS de gérer l'affichage d'éléments HTML en divisant les éléments de la page en tableau de style.

On conserve donc les bonnes balises HTML pour les sections de contenu et on continue de positionner ces dernières à l'aide du CSS, mais le CSS est simplifié par la création d'une grille d'affichage.

Notion importante

Une grille est constituée d'un élément parent dont les enfants de premier niveau forment les item de grille. Donc, si on veut créer une page entière sous forme de grille, nos blocs principaux seront des grilles et les sous-blocs seront des items de grille.

Un grid simple¶

Un grid contient au minimum :

un bloc parent dit "contenant" (wrapper)
des enfants

Exemple:

<div class="contenant">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
   <div>Quatre</div>
   <div>Cinq</div>
   <div>Six</div>
   <div>Sept</div>
   <div>Huit</div>
</div>

Le contenant délimite la grille, alors que les blocs enfants deviennent les cellules.

La grille la plus simple est celle où le contenant est défini et indique le nombre de colonnes et de lignes à partir de quoi les cellules se positionneront automatiquement :

.contenant {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 6em 6em;
}

Grille simple

Les unités

Tel qu'expliqué en classe, les unités utilisées pour définir les tailles de colonnes et de lignes ont un impact important.
On conseille d'utiliser les unités suivantes :

fr : pour les colonnes - indique un nombre de fractions d'espace-écran
em : pour les lignes - indique un nombre de fois la hauteur d'une ligne par défaut

Gestion des cellules¶

Une fois le nombre de colonnes et le nombre de lignes définies dans le contenant, on peut ensuite réserver des espaces en lignes et en colonnes pour une cellule.

HTML

<div class="contenant">
   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
   <div>Quatre</div>
   <div id="grid-div-cinq">Cinq</div>
   <div>Six</div>
   <div>Sept</div>
   <div>Huit</div>
</div>

CSS

.contenant {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 10rem auto 10rem;
}

#grid-div-cinq {
  grid-column: 2 /span 2;
  grid-row: 2/ span 2;
}

Grille simple

On peut aussi indiquer à quel endroit dans l'espace réservé, on veut que la cellule s'affiche :

CSS

#grid-div-cinq {
  grid-column: 2 /span 2;
  grid-row: 2/ span 2;
  justify-self: center;
  align-self: start;
}

Grille simple

Grid template¶

Dans le HTML, créer un bloc principal pour définir le contenant de la grille.
Dans le HTML, ajouter les divisions de la grille.
Dans le CSS, définir ce bloc comme étant une grille à l'aide de l'attribut display: grid;
Toujours dans le CSS, définir le nombre et, si nécessaire, la taille des colonnes et des lignes de la grille
Dans le CSS, compléter la définition de la grille au besoin.
Dans le CSS, définir l'étendue en lignes ou en colonnes des items de grille.
Finalement, refaire le même travail pour chaque section principale de la page:

Exemple

Grid

HTML

<header class="gridPrincipal">
    <div class="gridItem" id="gridItem1">LOGO</div>
    <div class="gridItem" id="gridItem2">NOM DE COMPAGNIE</div>
    <div class="gridItem" id="gridItem3">LANGUE</div>
</header>

<main class="gridPrincipal">
    <nav class="gridItem"  id="gridItem4">
        ITEMS DE MENU
    </nav>
    <section class="gridItem" id="gridItem5">SECTION 1</section>
    <section class="gridItem" id="gridItem6">SECTION 2</section>
    <section class="gridItem" id="gridItem7">SECTION 3</section>
</main>

<footer class="gridPrincipal">
    <div class="gridItem" id="gridItem8">MÉDIAS SOCIAUX</div>
    <div class="gridItem" id="gridItem9">SITE MAP</div>
    <div class="gridItem" id="gridItem10">AUTRE INFO</div>
</footer>

CSS

.gridPrincipal {
  display: grid;
  grid-template-columns: 20rem auto auto 20rem;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.3rem;
  background-color: #2196F3;
}

.gridItem {
  background-color: rgb(179, 179, 231);
}

#gridItem2 {
  grid-column: 2 / span 2;
}

#gridItem4 {
  grid-row: 1 / span 2;
}

#gridItem5 {
  grid-row: 1 / span 2;
}

#gridItem6 {
  grid-column: 3 / span 2;
}

#gridItem7 {
  grid-column: 3 / span 2;
}

#gridItem9 {
  grid-column: 2 / span 2;
}

À partir de là, on peut ajouter des éléments de style pour styliser les différents items de grille.

Grid

.gridPrincipal {
  display: grid;
  grid-template-columns: 20rem auto auto 20rem;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0.3rem;
  background-color: rgb(179, 179, 231);
  border-top: 0.1rem black solid;
}
.gridItem {
  min-height: 10rem;
  text-align: center;
  padding: 10rem;
}

#gridItem2 {
  grid-column: 2 / span 2;
}

#gridItem4 {
  grid-row: 1 / span 2;
  border-radius: 0.5rem;
  background-color: rgb(190, 190, 190);
}

#gridItem5 {
  grid-row: 1 / span 2;
  border-radius: 0.5rem;
  background-color: rgb(190, 190, 190);
  color: red;
}

#gridItem6 {
  grid-column: 3 / span 2;
  border-radius: 0.5rem;
  background-color: rgb(190, 190, 190);
}

#gridItem7 {
  grid-column: 3 / span 2;
  border-radius: 0.5rem;
  background-color: rgb(190, 190, 190);
}

#gridItem9 {
  grid-column: 2 / span 2;
}

Grid areas¶

Exemple tiré du site w3Schools, adapté au cours

grid page

HTML

<div class="grid-container">
  <header class="item1">Header</header>
  <nav class="item2">Menu</nav>
  <main class="item3">Main</main>  
  <section class="item4">Right</section>
  <footer class="item5">Footer</footer>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 1rem;
  background-color: #2196F3;
  padding: 1rem;
}

.grid-container > header, .grid-container > nav, .grid-container > main, .grid-container > section, .grid-container > footer  {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 2rem 0;
  font-size: 3rem;
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

Pour en apprendre plus¶

Pour plus de détails et pour connaître toutes les porpriétés CSS possibles dans un élément grid, nous vous invitons à lire et essayer les démonstrations disponibles sur le site de w3Schools.

Voir la rubrique w3Schools sur les grid

Ou encore, voir le guide complet sur le site de de CSS-Tricks :

Voir le guide CSS-Tricks

Quelques sites fait avec un grid (excellente source d'inspiration)

Site Inspire: grid layout websites

Les grid en CSS¶

Divisions en grid¶

Un grid simple¶

Gestion des cellules¶

Grid template¶

Grid areas¶

Pour en apprendre plus¶

Poster résumé¶