Le calendrier des ateliers — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 8)

Le calendrier des ateliers

Grid · niveau 3 (difficile)

Énoncé

La Librairie publie le calendrier de ses ateliers d'octobre 2026. Le mois est une liste ordonnée de 31 éléments <li>, précédée de la liste des sept jours de la semaine (« lun. » à « dim. »).

Ranger les deux listes en grilles de sept colonnes égales, dans une largeur de 420 pixels.
Le 1^er octobre 2026 est un jeudi. Avec une seule règle, faire commencer le mois dans la bonne colonne.
Colorer les samedis et dimanches avec des sélecteurs :nth-child(). À quelle position tombe le 31 ?

Corrigé


.jours-semaine,
.jours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0;
  margin: 0 0 4px;
  list-style: none;
  text-align: center;
}

/* Le 1er octobre 2026 est un jeudi : 4e colonne */
.jours > li:first-child {
  grid-column-start: 4;
}

/* Samedi et dimanche : les deux dernières colonnes */
.jours > li:nth-child(7n + 3),
.jours > li:nth-child(7n + 4) {
  background: #f3e3d3;
}

Il suffit de placer le premier jour : le placement automatique range les suivants à sa suite, le 2 en colonne 5, le 3 en colonne 6, le 4 en colonne 7, le 5 en colonne 1 de la rangée suivante. Le jour $d$ tombe dans la colonne $((d + 2) mod 7) + 1$ : les samedis (colonne 6) sont les jours 3, 10, 17, 24, 31, soit $d = 7 n + 3$ ; les dimanches les jours $7 n + 4$ . Le 31 est donc un samedi, en colonne 6 de la cinquième rangée : Chromium le place à 322,84 pixels du bord, soit $20 + 5 \times (56, 57 + 4)$ (colonnes de $(420 - 6 \times 4) /7 \approx 56, 57$ pixels). Fichier : code/ch8/exercices/calendrier.html. La couleur des week-ends n'est qu'un repère : l'information « samedi » reste portée par la colonne et son en-tête.