Tu utilises toujours Flex 😑
Certaines fois tu DOIS utiliser Grid ✅ !
Je te présente le :
➡️ "World famous Grid CSS Snippet"
Regarde l'effet parfais que ça donne avec la vidéo 🤩
#RT ❤️
🧵 #thread #css #grid #flex
Quand l'utiliser ?
Comme tu peux le voir dans la vidéo, c'est quand tu as une liste d'élément et que tu veux plusieurs items par liste en fonction de la taille d'écran !
Tu trouveras surement d'autres use-case !
Voici le "World famous Grid CSS Snippet" :
Mon but, c'est que tu le comprennes, donc je vais décomposer chaque partie ✅
Déjà voici une petite CodeSandBox pour que tu puisses tester : codesandbox.io/s/the-ultimate…
1. grid-template-columns
Permet de définir la taille de chaque colonne ainsi que le nombre de colonnes 🔢
Avec le code ci-dessus, tu vas avoir 4 colonnes qui font toutes le même taille !
2. l'unité fr
L'unité fr est une taille flexible uniquement pour les grid
Elle va remplir toute la place possible
Image-toi deux colonnes :
* la première de 1fr
* l'autre de 2fr
La deuxième sera 2 fois plus grande que la première !
3. repeat
Repeat va tout simplement éviter la redondance
Dans le screen de grid-template-columns j'ai mis 4x "1fr", tu pourrais le remplacer grâce à repeat !
Exemple :
4. auto-fill
Voici un ingrédient primordial de notre snippet !
Il remplace la valeur numérique du nombre de colonnes
Tout simplement, car il va calculer le nombre de colonnes en fonction de la taille !
S'il y a la place pour 3 en comptant les espaces, il sera égal à 3 !
5. minmax
Il définit la valeur min et max de chaque colonne !
Le snippet s'établit sur le mélange de minmax avec l'unité fr !
Tu définis la valeur min, par ex 150
La valeur max, 1fr
Ce qui donne en français : "prends min 150 px, mais s'il y a de place, prends-la"
Donc si tu mélanges repeat, minmax et auto-fill tu obtiens notre snippet 🤯💥 !
Voici comment il va fonctionner :
1. Regarder le nombre de colonnes qu'il peut y avoir une taille min de 150
2. Agrandir chaque colonne pour remplir toute la taille horizontale !
Si la taille est de 600, on peut exactement mettre 4 éléments de 150 px
Je pensais que ce Thread serait plus simple, mais c'est finalement un sujet complexe 💀 !
J'espère que tu as pu le comprendre, n'hésite pas à poser des questions !
D'autres tutos grid arrive donc :
➡️ Follow @melvynxdev 💪
Dernier Thread :
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.