Pages

Grid : auto-flow-columns

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

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Type</a></li>
  </ul>

CSS

  ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;

  list-style: none;
  }

  li:not(:last-child)::after {
    content: "→";
  }

  a {
    color: white;
  }

Les vidéos !

CSS :

"enfant" : lien

"attribut" : lien


 

Grille :   
 "placement": algorithmes


Grid placement

Pour chaque modification de valeurs de grille, je vous conseille de relancer l'algorithme de placemment.

Explication : lien


📱Test de placement !

📱Test placement

🛟Explication : https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Auto-placement

Simplifiez votre grille ! ⚖️

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.

 Analysez les codes HTML et en particulier celui de la grille !

See the Pen Grid by Example 13: Redefining grid areas with media queries by SuperDupont (@SuperDupont) on CodePen.

Travaux des L1

 Voici un projet réalisé par un.e L1 DD


Le projet consiste à adapter le code de base : https://codepen.io/dupontcodepen/pen/ByLByMB

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/