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)