Pages

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/



🥷GRiD/FLEX

 


Analysez les codes CSS

La superposition d’éléments avec CSS Grid est une technique moderne, puissante et élégante pour créer des interfaces riches et responsives. Elle permet de placer plusieurs éléments dans la même cellule de grille, de contrôler précisément leur ordre d’empilement avec z-index/order et de gérer facilement l’alignement grâce à place-items et place-self. 

🥷🏿Cette approche surpasse le positionnement absolu en termes de maintenabilité, d’accessibilité et de performance, tout en restant compatible avec les exigences du web moderne.

code → Absolute/Stacking

IA : smart une catastrophe

Je viens de batailler avec l'IA


... je vous passe les détails des réponses délirantes de l'IA






🥷🏽🥷🏽🥷🏿Challenge

Objectif : Trier les étudiants par Filieres ?

Analyse : C'est bien la premiere fois que j'entends que l'on pourrait trier des éléments avec une grille ! 


Code de base :

voir promo


Résultat attendu : 

Plus d'infos »

Les algorithmes de placement : 🎉

 DS

Ordre des blocs placés automatiquement : grid;

Utilisons  le simulateur et appliquons le style suivant :

.conteneur {
  display : grid;
  grid-template-columns: repeat(2,100px);
  grid-auto-rows: 100px;
}
#it1 {
   grid-column: 2;
   grid-row: 1;
}

🛟Nous allons tenter de comprendre l'algorithme utilisé pour placer les blocs.

Tout d'abord, les blocs "fixes" sont placés. 
Définition :  On appelle bloc fixe, un bloc qui à son emplacement défini en ligne et en colonne.

Dans notre exemple, le bloc rouge est un bloc fixe. En effet, sa colonne et ligne sont définies.


Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).

Dans notre exemple :

Les blocs bleu, vert et gris sont placés dans cet ordre.

Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.



Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.

Cas des blocs définis sur la dimension définie par le flow.

Examinons ce cas



#it1 { 
   grid-row : 2;
   grid-column : 2/3;
}

#it2 {
   grid-column : span 2;
}

#it3 {
  grid-row : 1;
}

🥇Priorité des blocs :
  1. Le bloc 1 est traité en priorité (bloc fixe). 
  2. Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
  3. Les blocs restants sont traités par ordre du flux.
autre exemple


Cas des blocs définis uniquement sur une dimension.



Voici un Autre cas

exemple avec grid-column-end

.conteneur {
  display : grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

#it1 {
   grid-column: 2;
   grid-row: 1 / 2;
}

#it2 {
  grid-column-end: span 2;         
}


Comme précédemment le bloc rouge est placé en priorité, ensuite le bloc bleu cherche une place où il peut se placer sans "toucher" les blocs fixes. Exemple


Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.


→ 🪛 exemple
⇉  🪛exemple


🎚️Denses

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 ).

Pour remplir les trous vides  grid-auto-flow: dense; fait des merveilles


⇶ exemple

Résumé sur le placement :


Le flux est en ligne, un element qui a sa colonne fixée bloque le flux !


🥷Notez





🥷Le flux est en colonne, on ne peut passer devant un element qui a sa ligne fixée.




notez

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

 

🧙🏽‍♂️Learn by yourself : 

🎉 https://dupontcss.blogspot.com/2022/09/grid-without-dense.html

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 🛟

Exemple de DS Machine :⏱️30 minutes

  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
  3. 🥇https://dupontl1.blogspot.com/2023/02/ds-help.html


DS Papier : ⏱️30 minutes

Plus d'infos »

Use case : TOP

Codes




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


Des zones / fonction de la taille








🪛Autre exemple : https://dupontdenis.github.io/learn-flex-by-yourself/

Empilement 



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 ?






Inscription à : Commentaires (Atom)