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

Projets : grid

Vous allez trouver trois projets : grid en action

Simulateurs

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

Code du simulateur de Grid : télécharger

Cours : Grid distanciel !

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

 

Objectif du cours

Distanciel

Comment allons nous gérer le cours ?

Pour ne pas créer de complications supplémentaires, voici comment je vais organiser les deux prochains cours du vendredi 11 et 18 septembre.

Vendredi 11/09 : 

Présentiel : Après une courte introduction, nous introduirons Grid ! Une révolution CSS.

Distanciel : liens sur des Vidéos sur Grid à voir dans la semaine !

Vendredi 18/09 : 

Présentiel : Après une courte introduction, nous introduirons Grid ! Une révolution CSS.

Distanciel : liens sur des Vidéos sur Grid à voir dans la semaine !

Calendrie AB

 

Nous allons nous retrouver suivant le calendrier de votre filière en journée A ou B.

Si vous appartenez au groupe correspond à celui de la journée, vous serez en présentiel.

Dans le cas contraire, vous serez en distanciel.

Monsieur Dupont : on dirait Pr. Raoulte