FLEX AUTOUR D'UN CAFÉ

☕

Support de Flexbox

GRID LE TEMPS D'UN CROISSANT

🥐

Support de Grid

PLus de Flex

🤸

PLus de GRID

🤹

Résultat

Les limites de Flex

💥

GRID EN PRATIQUE

🎢

firefox grid inspector

• Bonne visibilité de la grille
• Ultra intuitif
• Possibilité de modifier les couleurs de l'inspection
• Possibilité d'afficher le nom des lignes (si nommées)

MEdium

Medium

Slate

Slate

C'est AUSSI UNE ancienne spec pour EDGE < 16
Donc pas de :

• grid-gap
• grid-area
• repeat() et minmax()
• auto-fit et auto-fill

@support

Support de @supports

Feature query manager (FF / Chrome)

La fin de Flex ?

🗑️

On aime GRID pour

• Multi-dimensions
• Plus de liberté :
  • le placement précis
  • les jointures
  • les chevauchements
• Meilleure gestion de l’intrinsèque
• Meilleure gestion des gouttières
• La lisibilité des grid area ❤️

On aime FLEX pour

• La légerté
• Le support
• Yoga !
• Les animations

Grid

• Pour de l'architecture
• idéal pour les gabarits

Flex

• Pour de l'alignement
• idéal pour les composants

Ressources

Les concepts

• Bac à sable
• Les concepts de base des grilles CSS
• Les démos des concepts

Vidéos

• Layout Land
• CSSGrid.io

Jeux

• CSS Gris Garden