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
}
<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)