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>
<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
}
.conteneur {
display: grid;
grid-template-columns: repeat(2, 100px);
}
#it4 {
grid-column-end : 1
}
Imaginer le résultat du CSS suivant
#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 1 (fixe row/col),3(fixe row),2(ordre flux),4(ordre flux)