[Résolu] GRID vs FLEX

Bonjour,

Question toute bête, quand on a le choix entre GRID et FLEX pour un élément qui n'occupe qu'une seule ligne y a-t-il une préférence ?

div.list {display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: max-content; align-items: start; margin: 0 10px 20px 0}

ou

div.list {display: flex; align-items: start; margin: 0 10px 25px 0;}
/* La largeur de la première colonne est alors fixée par le contenu */

FLEX est un peu plus court...

S'il y a une centaine de div.list dans la page y a-t-il une différence de vitesse de traitement ?

Si le parent est lui-même en display GRID, cela fait-il une différence ?
Je me souviens qu'il faut éviter les tableaux imbriqués.

Merci d'avance.

Hello,

Il y a de petites différences en terme de performances entre les deux méthodes, principalement concernant le souci des "Cumulative Layout Shifts".

En très résumé, Flexbox est (forcément) plus flexible par défaut, les enfants sont naturellement soumis à flex-shrink par exemple. De ce fait, il est légèrement moins performant de manière générale.

Plus d'infos : https://http203-playlist.netlify.app/videos/avoiding-layout-shift-by-putting-the-css-in-charge/

Bonjour Raphaël,

Merci de ta réponse.

Donc je vais choisir GRID même si la différence n'est pas visible.

Bonjour,

J'ai écouté la conférence des deux experts, très intéressant.

Un codepen pour la route, je reviens dessus demain.

Bonjour,

Le codepen montre trois positionnements possibles.

GRID
Table
Float

Je suppose que Table n'est pas plus performant que Grid et qu'à présent Grid est aussi bien supporté que Table.

Sur petit écran mon objectif est d'habiller l'élément de gauche, qui est une image.

Pour ce faire Float est-il encore la meilleure solution ?

PS : ce n'est pas l'objet de ce POST mais je ne comprends pourquoi en GRID le haut du texte n'est pas aligné sur le haut de l'image.

boteha_2 a écrit :


PS : ce n'est pas l'objet de ce POST mais je ne comprends pourquoi en GRID le haut du texte n'est pas aligné sur le haut de l'image.

Bonsoir,

p à une marge verticale par défaut de 1em. C'est cet écart que tu perçois . p en table-cell ne peut pas appliquer de marges externes, il n'y a que padding ou border-spacing sur le div en table qui est applicable.

Bonjour gcyrillus,

Merci de ton suivi.

D'accord, j'ai ajouté cette déclaration dans le codepen :

div.grid > p {margin: 0}

Je rappelle ma question principale :
Quand il faut habiller une image avec du texte, existe-t-il aujourd'hui une meilleure solution que FLOAT ?
Modifié par boteha_2 (29 Dec 2022 - 11:46)

Bonjour,

Si j'ai compris ce que tu souhaites faire avec ton image, c'est un usage typique de float. Et il n'y a pas vraiment d'alternative si tu veut que ton texte glisse autour. Tout au plus, shape-outside peut en complément de float modifier la forme initiale rectangulaire de ton élément flottant.
Grid et flex créent une grille à partir de boite rectangulaire etanche


Cdt
Modifié par gcyrillus (29 Dec 2022 - 13:00)

OUI, usage typique de FLOAT.

Merci de ta réponse, c'est clair.

Comme d'habitude j'attends quelques jours avant de cocher Résolu.

Bonjour,

Je coche Résolu.

Encore merci pour votre aide.