display-grid: une nouvelle maniere d'organiser vos pages web (1/2)

Les CSS grid ont été implémentés dans les principaux navigateurs Internet en 2017 (même Edge !). Cette nouvelle spécification simplifie grandement la mise en place du design de nos pages Web et s’inspire des design avec <table>, si populaires dans le passé :)

Un premier exemple

Pour utiliser les CSS grid, le point de départ est l’utilisation de l’attribut CSS display: grid dans la div contenant les éléments à organiser. Nous obtenons ainsi l’accès à de nouvelles propriétés CSS.

Les deux principales sont grid-template-columns et grid-template-rows. Ces dernières permettent d’organiser notre grille : nombre de colonnes et lignes, ainsi que l’espace qu’elles prendront. La propriété grid-gap nous permet aussi d’espacer, entre eux, les éléments de notre grille.

Par exemple, pour créer une grille de 3 colonnes et 2 lignes, nous procéderons de la manière suivante :

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
  .parent {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;

    height: 100px;
  }
  .parent div {
    background-color: lightgray;
  }
</style>

Avant de montrer le résultat du code ci-dessus, il est d’abord nécessaire d’expliquer la notion de fr : il s’agit en réalité d’une ‘fraction’ de l’espace disponible.

Cette unité laisse au navigateur le soin de gérer les arrondis, souvent problématiques en CSS… Qui n’a pas rencontré des soucis avec des div de 33% ou 33.33% ? Avec fr, le navigateur s’occupe de tout !

De plus, nous pouvons modifier gérer plus finement la répartition des largeurs. Par exemple, pour une répartition 2/3 et 1/3, nous pouvons faire grid-template-columns: 2fr 1fr;. Cette notion est équivalente à celle existante dans flex.

Bien sûr, il est aussi possible de préciser des dimensions en pixels ou pourcentage.

Pour revenir à notre exemple, nous obtenons donc une grille de 3x2 élements donc chaque bloc est séparé de 20px :

Simple non ? On peut ainsi facilement créer le système de 12 colonnes de Boostrap avec le code suivant grid-template-columns: repeat(12, 1fr) qui nous permet de découvrir repeat, une instruction pratique pour moins utiliser son clavier :-)

Les propriétés CSS : grid-column & grid-row

Dans certains cas, nous souhaitons que nos éléments prennent plus d’une case dans notre grille. Pour cela, le module grid propose deux propriétés : grid-column et grid-row avec l’attribut span X, x étant le nombre de cases à fusionner.
Au niveau de leur fonctionnement, il est similaire à celui des rowspan et colspan dans les balises td de nos table.

<div class="parent">
  <div class="two-columns"></div>
  <div class="two-rows"></div>
  <div></div>
  <div></div>
</div>

<style>
  .parent {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;

    height: 100px;
  }
  .parent div {
    background-color: lightgray;
  }

  .two-columns {
    grid-column: span 2;
  }
  .two-rows {
    grid-row: span 2;
  }
</style>

Résultat :

Responsive

L’avantage des grid-template-columns est aussi de faciliter la mise en place d’un comportement responsive sur notre site. En effet, si on souhaite basculer sur une colonne sur mobile, il suffit de spécifier :

<style>
  @media (max-width: 760px) {
    .parent {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-gap: 5px;
    }
    .two-columns {
      grid-column: span 1;
    }
    .two-rows {
      grid-row: span 1;
    }
  }
</style>

Résultat :