JS

 

DS !

Un DS d'un 1/4 est prévu au prochain cours,

Il faut commencer l'entrainement sans tarder !

N'oublie pas

• https://dupontdistanciel.blogspot.com/
• http://dupontcss.blogspot.com/2020/09/grid-bilan.html

Entrainement : 

 Soit le HTML

<div class="conteneur" style="width: 400px; height: 400px;">
   <div id="it1">A</div>
   <div id="it2">B</div>
   <div id="it3">C</div>
   <div id="it4">D</div>
</div>

Imaginer le résultat du CSS suivant

.conteneur {
    display: grid;
    grid-template-columns: repeat(2, 100px);
 }

#it4 {
grid-column-end : 1
}

Imaginer le résultat du CSS suivant : 

JE vous propose de regarder le vidéos https://dupontdistanciel.blogspot.com/

#it1 { 

   grid-row : 2;

   grid-column : 2/3;

}

#it2 {

   grid-column : span 2;

}

#it3 {

  grid-row : 1;

}

Pour un flux row, les blocs sont traités dans l'ordre it1 (fixe row/col), it3(fixe row), it2(ordre flux),it4(ordre flux)

Vidéos !

https://dupontdistanciel.blogspot.com/

Vidéos sur le placement

Projets : Grid

Vous allez trouver trois projets : grid en action

Simulateur : Grid

Vous pouvez utiliser le simulateur Grid à tout moment  ( ici )

Code du simulateur de Grid : télécharger

Cours : CSS grid

 

Cours :

 Nous avons conçu avec Mozilla un cours spécialement pour le distanciel. Il est fait pour vous. 

-> Grid