scroll snap

 

CSS à fond la forme

Grid: bilan

 Voici une série d'exercices sur CSS grid.

A) Création d'une page

Utilisation de  →Template-areas


B) Les alogorithmes de placement

1. Comprendre les algorithmes de placement
2. Comprendre les algorithmes de placement (dense)

C) En action

1. Création d'une page WEB
2. Création d'un page d'une bibliothèque de photos

D) Avancé

1. Multi support
2. Création d'un design avancé

span en action

See the Pen Grid auto-flow dense by dupont (@dupontcodepen) on CodePen.

TD : grid

 Définir des zones ! (-> TD°

grid : Projets

Projet 1

Nous allons créer une grille digne des plus grands journaux nationaux ! 

cliquez

Projet 1

Projet 2

 Il existe depuis la nuit des temps une jolie balise pour créer des zones ( -> map )

<map> 

Les zones

Comment définir les agglomérations, les villes et les zones ?

On parle de zones

• rurales
• urbaines
• commerciales
• franches
• administratives
• C19 rouge, vert, bleue
• 
  
• ...

Grid permet de définir des zones. Ce ne sera pas une populations, des industries ou encore des administration, mais du HTML qui sera implanté dans les zones définies !

Rappels

Projet 2

Projet 3

Nous allons finir par créer une page au look personnalisé !

-> Projet 3

Mettre des conditions

1.  @supports (display: grid) {
2.   .wrapper > * {
3.     width: auto;
4.     margin: 100px;
5.   }
6. }

Si le navigateur prend en charge display grid alors ...