Pages

Les algorithmes de placement : 🎉

Des algorithmes puissants au service du placement des blocs


.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-auto-rows: 100px;
    grid-gap: 10px;
    grid-auto-flow: row;
}

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

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

.wrapper div:nth-child(3) {
    grid-row-end: span 2;
}

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

Algorithme par l'exemple


Sans détailler les algorithmes, en voici le principe.

1) On place les objets qui ont une position. Sont concernés ceux qui ont une valeur pour grid-column et grid-row.
Dans l'exemple, les blocs 1 et 2 sont concernés.

2) On place les autres objets restant ( ici 3 et 4) en tenant compte de leur taille.
Dans notre exemple, la première *case* qui permet d’accueillir le bloc 3 est à la ligne 3, colonne 1.


Pour le bloc 4, qui doit être placé après le bloc trois (on conserve l'ordre du DOM), la première *case* correspond à la ligne 5, colonne 1.

Algorithme automatique avancé


L'algorithme de placement avec la valeur "dense" permet de combler des *trous* !

.wrapper {

  display: grid;

  grid-template-columns: repeat(4, 100px);

  grid-auto-rows: 100px;

  grid-gap: 10px;
  🪛grid-auto-flow : row dense;

}

Dans cette exemple, le bloc 4 peut être placé à la ligne 1 colonne 3 (le placement ne respecte plus le flux du DOM).


Remarque : Sur cet exemple simple, on pourrait forcer le placement du bloc 4 (  premier bloc des non fixés)

.wrapper div:nth-child(4) {
   grid-column-end: span 2;
   order : -1

 }

Cette idée (définir l'ordre parfait) n'est pas utilisable dans un cas général ( une centaine de photos de taille différentes ).

Challenge : 10pts

🎚️hard : Donnez le code CSS pour créer le drapeau français.

Le html est imposé.


    <div class="flag">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="white"></div>
    </div>

🎚️easy : Complétez le CSS par ZONE nommées pour obtenir le drapeau suivant.

<div class="flag">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
  <div class="b4"></div>
</div>



Plus d'infos »

🥷🥷🥷Dense

 

Projet grid


🥷Les photos sont triées par catégories ! 🥷

See the Pen fetch img cat by dupont (@dupontcodepen) on CodePen.


Help : 

CSS : 10 premieres minutes ! 

DS 🛟


DS Machine ⏱️30minutes

  1. Recherchez dans un moteur "denis dupont cinémathèque"
  2. Ajouter un article
    1. intégrer la vidéo de https://www.cinematheque.fr/video/1469.html
    2. intégrer la vidéo avec démarrage automatique
    3. intégrer la vidéo avec démarrage à la 13'30

DS type : ⏱️15 minutes


▶ Sujet type minute


Plus d'infos »

Use case : TOP

🪛  → https://dupontdenis.github.io/grid-info/


Des zones / fonction de la taille


Empillement 



Galerie modulable









Grid

🪛 Un bloc contient une grille qui contient 4 blocs ! 

Pour comprendre les différentes valeurs de placement, il y a certaines conditions à remplir : 

🧙🏽‍♂️la grille est plus petite que son conteneur et les blocs sont plus petits que les cellules de la grille.


Ainsi, si la grille est plus petite que son conteneur, la grille peut être placer  (haut, centre ...)


Si les blocs sont plus petits que les cellules, les blocs peuvent se déplacer dans la cellule (haut, centre ...)




En action → https://dupontdenis.github.io/grid-info/



Inspectez et jouez avec  





Grid : tout en un !

 

Objectifs





 https://dupontdenis.github.io/grid-exemple/


Inspection : → https://learn.microsoft.com/fr-fr/microsoft-edge/devtools/css/grid


Cours


Inscription à : Commentaires (Atom)