Cours 5.2

Projet portfolio (25%)

Projet Portfolio - Infos générales

Instructions de la remise 3: suivi de votre travail d'intégration HTML/CSS 1er octobre

Aujourd'hui

• CSS Grid
  • Introduction
  • Styles du conteneur: grid-template-columns et grid-template-rows.
  • Espacement avec gap.
  • Unités fr, minmax()et repeat().
  • Styles des éléments enfants à placer: grid-column et grid-row
  • Définir les 4 coins de l'élément enfant à placer avec grid-area
  • Style du conteneur: grid-template-areas: : nommer des zones dans une grille

CSS Grid

CSS Grid: Introduction

Styles du conteneur:
grid-template-columns et grid-template-rows.

Espacement avec gap.

Unités fr, minmax() et repeat().

Exercices

• Exercice 1 Grille de couleurs

• Exercice 2 Carte de bingo

• Exercice 3 Mise en page simple

• Exercice 4 Grille Spotify

CSS Grid (suite)

Styles des éléments enfants à placer:
grid-column et grid-row

Définir les 4 coins de l'élément enfant à placer: grid-area

Styles du conteneur: grid-template-areas: nommer des zones dans une grille

Résumé en 100 secondes

Autres références

Référence : CSS Tricks: CSS Grid Layout Guide

MDN: Les concepts de base des grilles CSS

Exercices

• Exercice 5: The Killing Joke

• Exercice 6: Les offres Samsung

• Exercice supplémentaire 7 (si tu as terminé) : CSS Grid Garden

Devoirs

• Terminer les 6 exercices grid css pour mercredi le 1er octobre
• Faire l'intégration CSS+HTML de votre portfolio pour mercredi le 1er octobre