Rappel sur le sens du remplissage d'une grille
🪛Code en action
Dans le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/
remplacez le code par les codes suivants !
HTML
Rappel sur le sens du remplissage d'une grille
grid-auto-flow: row; | grid-auto-flow: column; |
1 2 3 → 4 5 6 | 1 4 ↓ 2 5 3 6 |
🪛Code en action
Dans le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/
remplacez le code par les codes suivants !
HTML
Pour chaque modification de valeurs de grille, je vous conseille de relancer l'algorithme de placemment.
Explication : lien
🛟Explication : https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Auto-placement
Pourquoi faire compliqué lorsque l'on peut faire simple !
Comparez les codes HTML/CSS
See the Pen Grid by Example 13: Redefining grid areas with media queries by Rachel Andrew (@rachelandrew) on CodePen.
See the Pen Grid by Example 13: Redefining grid areas with media queries by SuperDupont (@SuperDupont) on CodePen.
Voici un projet réalisé par un.e L1 DD
https://melinakhettab.github.io/DM-Dupons/
https://salwaaaitali.github.io/vpro/
one more : https://dupontdenis.github.io/iframe/
Autre projet avec Grid !
https://clement-soulier.github.io/DM-calculator/