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


🥷Grille dynamique

 Voici un exemple de grille dynamique ( = le HTML est généré par un programme ! )


See the Pen Calendrier today by SuperDupont (@SuperDupont) on CodePen.

🥷 Test : c'est quoi CSS

HTML

CSS

<h1>Inspecter le style</h1>

<p>Pourquoi le style est baré ?</p>




p {

  background-color: blue;

}


h1 + p {

  background-color: gold;

}


p:last-child {

 background-color: black;

}


h1 ~ p {

  background-color: red;

} 


❓Quel sera la couleur du paragraphe ?


🪛Utilsez le simulateur

https://dupontdenis.github.io/TestSelecteurDemo/


🛟Explications

See the Pen level CSS by SuperDupont (@SuperDupont) on CodePen.

Inspection



L'inspection donne le résultat des règles de priorité :


Amusez-vous à cocher et décocher les règles




🥷 Comprenez-vous pourquoi dans VisualStudio Code, le résultat avec live serveur donne au parapgraphe la couleur rouge ?






Projet à rendre : Mon CV

Le projet → Microsoft CV

Date limite 01/03/2026

 

SOS lien : CV en ligne

Workshop Microsoft ©️

  Nous avons mis en place un workshop pour illustrer la mise en ligne de votre CV

Exemple

https://dupontdenis.github.io/CV/

Suivez le guide

Create a resume website in the Browser using HTML, CSS, github.dev, and GitHub Pages

👉 https://github.com/ornelladotcom/resume-website-workshop 👈


⇉ 

Le passage de VStudio à GitHub se fait en un clic !

Illustration :

Le déployement se fait en un clic !

Illustration :

 résultat : https://dupontdenis.github.io/CV/


Inspection montre l'utilisation d'une grille CSS.




TD Grid : grille dans grille

 Définir une grille : Rappels

See the Pen CSS Grid Layout - Basic Layout by SuperDupont (@SuperDupont) on CodePen.


 🪛TD : → lien 🪛


🎉En action : → lien


Une grille





Des grilles dans une grille




🥷Pour en savoir plus sur object-fit → https://mdn.github.io/css-examples/object-fit-basics/

Plus d'infos »

🥷 Projet entreprise

 

 Z-index : La troisième dimension !

Avec Edge, on a une vue 3D ! 

Analyser et corriger le code

https://dupontdenis.github.io/cssPostion-useCase/


Analyse : la photo devrait être mise en avant.
Inscription à : Commentaires (Atom)