Rappel: Podsie

Pour commencer, effectuer sur Podsie

Grid Layout, notions avancées

Nous avons appris la semaine passée les bases du module CSS Grid Layout.

L’objectif de cette séance du 21 septembre est de compléter nos connaissances de ce module: nous allons découvrir ses fonctionnalités avancées.

Les points à l’ordre du jour:

  1. Les zones nommées : comment donner des noms aux zones et lignes de la grille.
  2. Les Fonctions CSS du module Grid: repeat(), auto-fit et minmax().

Les explications et exemples sont dans le support de cours: https://cours-web.ch/css-grid/nommer.html – chapitre 7 et 8.

Le Challenge N°4

Produire une grille d’images, avec les nouvelles fonctionnalités – repeat, auto-fit, minmax. L’objectif est de créer une grille avec des images en format horizontal et vertical, avec aussi peu de lignes CSS que possible.

Voici un début de code HTML, qu’il s’agit de transformer en grille:

See the Pen Grid Gallery by Manuel Schmalstieg (@eracom) on CodePen.

Après avoir essayé de faire l’exercice, vous pouvez vous corriger en prenant comme référence ce code : https://codepen.io/eracom/pen/zYzaBed