Pages

Pensez simple !

 Comparez le code

https://gridbyexample.com/examples/code/example13



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

avec 


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

Inscription à : Commentaires (Atom)