JS

 

DS

Défi pour ce WE

 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

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

 .wrapper {

    display: grid;

    grid-template-columns: repeat(4, 1cm);

    grid-auto-rows: 1cm;

    grid-gap: 0.1cm;

    grid-auto-flow: row;

}

div:nth-child(1) {   grid-column: 3 / 5;   grid-row: 2 / 5; }

div:nth-child(2) {   grid-column: 1 / 3;   grid-row: 1 / 3; }

div:nth-child(3) {   grid-row-end: span 1; }

div:nth-child(4) {  grid-column-end: span 2; }

Dessiner le résultat du placement des ces quatre div dans le wrapper

Vidéodistanciel

https://dupontdistanciel.blogspot.com/

Grid en folie !

https://codepen.io/collection/DgwjNL/

Vidéo : Placement