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

Grid-area : le positionnement par zone

Pour aller plus loin avec la propriété display: grid, il est possible de nommer les différentes zones de notre grille pour les affecter aux éléments enfants. Deux propriétés nous permettent cela : - grid-template-areas pour le nommage des zones de notre grille - grid-area pour affecter un nom à un élément enfant

Ainsi, le code suivant…

<div class="container">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "header  header header"
      "nav    main   main"
      ".      main   main"
      "footer footer footer";
  }

  header {
    grid-area: header;
    background-color: yellow;
  }
  nav {
    grid-area: nav;
    background-color: red;
  }
  main {
    grid-area: main;
    background-color: green;
  }
  footer {
    grid-area: footer;
    background-color: orange;
  }
</style>

…permet d’obtenir le rendu suivant :

**Première remarque**: comme on peut le remarquer, la propriété grid-template-areas permet de visualiser facilement l’organisation de notre page. **Deuxième remarque**: la définition d’une zone vide est possible avec le caractère ‘.’

Le responsive se retrouve encore plus facilité car une simple redéfinition de grid-template-areas suffit :

@media (max-width: 760px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

Résultat obtenu :

Auto-flow: laisser le navigateur gérer le nombre de colonnes

Envie de créer un design responsive à moindre frais ? auto-fit est là pour vous ! Cette propriété, associé à repeat et minmax indique au navigateur de décider lui-même du nombre de colonne.

Note : minmax permet de spécifier une largeur minimal et maximale à notre colonne.

<div class="container">
  <img src="https://placeimg.com/320/240/any?t=1540277633194" alt="" />
  <img src="https://placeimg.com/320/240/any?t=1540277663768" alt="" />
  <img src="https://placeimg.com/320/240/any?t=1540277675502" alt="" />
  <img src="https://placeimg.com/320/240/any?t=1540277689969" alt="" />
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 5px;
  }
  .container img {
    width: 100%;
    max-height: 200px;
  }
</style>

Le code ci-dessus demande au navigateur : “Je souhaite que mes colonnes fassent entre 200px et 1fr de largeur”. Ainsi, le navigateur se forcera à respecter cette règle et fera varier le nombre de colonnes en fonction de la largeur de la fenêtre.

Pour aller plus loin

Pour en apprendre davantage sur les CSS grid, je ne peux que vous conseiller de visionner cette conférence de Rachel Andrew sur le sujet lors du Devfest Nantes de 2017 :