Tutoriel CSS : display: grid;

Article ► grafikart.fr/t...
Abonnez-vous ► bit.ly/Grafika...
Je vous propose de découvrir ensemble le nouveau système de grille en CSS (`display:grid;`). Cette nouvelle disposition va permettre de définir une grille qui sera ensuite utilisée pour placer les éléments enfants.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/p...
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/t...

[@32000cd]

Je regrette de ne pas avoir découvert ta chaine avant de payer pour des formations qualitativement largement inférieure à tes vidéos. Merci pour tout ce boulot, un vrai plaisir.

[@developpeurfront-end3681]

Tu es génial mec ... Vraiment.. Ca fait 6 mois que j'apprend en autodidacte, avant de faire une vrai formation. Et je bloque sur certaine chose, mais avec tes vidéos, tous est si simple, une explication simple, et poussé, des TP, et du contenu a gogo sur ta chaine. Si tu fermes ta chaine je te fais un procès :') MDRR ! Plus sérieusement, c'est un régal ton apport de connaissance a cette communauté . Merci l'ami

[@vianney_fpv]

je sais pas pourquoi mais dès que je regarde une de t'es vidéos je comprend tout de suite merci beaucoup de se que tu fait

[@667crypto5]

Merci pour le travail, tu es une pepite pour tout les apprentis dev francophone c'est fou

[@MrBonbatong]

Merci pour ces supers tutos! Ton approche pédagogue est excellente, bien mieux que certaines formations payantes d'ailleurs!

[@paulmeyer9955]

Merci pour cette super vidéo que je découvre car je me remet à la création de sites internets après de nombreuses années d’arrêt. J'ai envie de dire que plus ça change plus c'est la même chose. Je me souviens, dans les premières années du web on faisait la mise à page avec des tableaux. Puis quand sont apparus les CSS on nous a dit, les tableaux c'est le mal. Et quelques années plus tard voila qu'on nous ressort .... l'équivalent des tableaux, sauf qu'on appelle ça des grilles Bon c'est un peu plus puissant que ce que permettaient les tableaux et la différence c'est que ça se passe au niveau du CSS au lieu que ce soit au niveau du HTML, mais c'est grosso modo la même chose ;)

[@arnaque-tuto-informatique-exp]

salut, j'ai connu ça aussi et comme vous, j'ai envie de me remettre dans le bain de la creation de site web...mais comme j'ai aussi des projets de jeux sur unity, et egalement de motion design, 3d et accessoirement cybersécurité / administration reseau...je sais pas combien de temps je vais en faire...j'ai quand meme 6 ou 7 sites à faire !!! mais je dois aussi reprendre le php et js.... j'utliisais les tableaux aussi, mais je me casser pas le derriere, j'utilisais dreamweaver ou name web editor ^^ ....et quand j'allais dans le code, je voyais que c'etait le bordel de ouf ^^ alors des fois, je corrigeais.

[@MrMoonshineS]

T'es extraordinaire comme gars. Tout parait simple quand tu le fait.

[@djangolikid473]

#Exatement!

[@fatimameziane5385]

merci grâce a ce tutoriel j'ai enfin compris les Grid... good luck

[@pachko7164]

grid-template-areas => BADASS Merci pour cette vidéo de qualité, comme d'hab!

[@saralouazo8928]

Pachko ouais c’est là que j’ai pleuré

[@huguolin2543]

Super video, comme d'hab, merci. Simplement en un mois que j'ai commençé à me former je suis passé d'un "vieux" pdf sur les floats par ici, ensuite les flexbox par ici et maintenant le grid, ça commence à faire beaucoup :D

[@AliceGaudon]

C'est si bien ! J'ai plus envie de faire quoi que ce soit d'autre que des grid maintenant /o/

[@Gjffza]

Tuto parfait ! Dommage qu'il n'a pas était publié en Janvier pour pouvoir réussir mon projet avec une facilité de compréhension...

[@benlebowski1929]

Super, rien à dire à part merci ! Ton travail, tes vidéos, j'adore et c'est très bien d'avoir autant de contenu d'une très très bonne qualité ! :-)

[@john-mikecourteaud9772]

Un énorme merci

[@JarlHelin]

Un vieux devfront qui reprend la nouveauté de GRID (un peu en retard) Bravo pour cette explication!

[@Hepasta]

tu viens de changer ma vie ! bon je vais devoir modifier tout le code de mon site, mais pour une prochaine refont sa sera plus esthétique et bien plus pratique :) en tout cas merci

[@jeanlefebvre1181]

super pratique pour le responsive mobile first

[@michaelplichart3224]

Très bonne vidéo, ça doit te prendre du temps et donc merci pour tout ce boulot. C'est génial.

[@Bobywoodwarrior]

Dans la colonne dispoition de firefox, tu as la possibilité d'afficher les numéros des lignes et des zones, c'est plutôt pratique ;)

[@guichburton5282]

un grand merci, je captais pas avant de voir avec toi pfiou ^^

[@e-genieclimatique]

excellente vidéo , elle m'a bien aidé

[@LudovicGodard]

Merci pour le partage ! Vous êtes génial.

[@emilie1977]

Le CSS commence à me plaire

[@florianm22]

Avec grid et flexbox on peut enfin prendre plaisir à faire du layout et plus s'y arracher les cheveux ^^

[@saralouazo8928]

Florian c’est clair punaise

[@kurisu-game]

Je ne connaissais pas le système de grille, merci donc pour cette vidéo. Je vais pouvoir bosser avec ça, c'est mieux que comme le fait Bootstrap.

[@electroheadfx]

beau tuto, merci

[@LesTutossUE4]

Si vous voulez vous entraîner : cssgridgarden.com

[@chapristi4116]

mrc

[@saralouazo8928]

Flexbox : content is king. Grid Layout : container is king. 😉

[@Sql37]

Merci à toi, très clair !

[@asmaenacer2062]

Merci beaucoup tu m'as énormément aidé

[@minute_illimitee]

Tu nous gave de bon miel ...merci ;)

[@mercierthomas6789]

Merci beaucoup, vidéo de qualité et des explications au top. Ça donne envie de mettre la main à la pâte ! ;)

[@lilprim45]

Encore un tuto super clair !

[@ange550]

Merci

[@daniellasansouci6744]

bonjour merci pour ton cours très clair et explicite. Donne tu des cours et as-tu une convention avec pôle emploi

[@leopng]

Super vidéo, très clair

[@_Greenflag_]

Petite erreur à 4:30 => il s'agit de grid-auto-rows et non de grid-template-rows pour une répétition des lignes (nombre de déclarations < nombre de lignes) 19:45 tu peux rajouter simplement gap au lieu de grid-gap (comme pour les flexbox)

[@Pentiminax]

Super tuto, très intéressant !

[@OFR5086]

merci super vidéo clair !

[@creedsa9520]

bonne explication ! bravo!

[@MouhamadouDer]

Cool la vidéo

[@yassineejjoud4201]

Thank you for sharing such great value

[@yklash]

merci infiniment

[@yannoche_bzh]

Je vote pour un tuto portfolio masonry en display grid :)

[@saralouazo8928]

Yann St 😅

[@MULTICODE]

Trop cool ta manière d'expliquer, grâce à cette vidéo je comprends maintenant mieux le système de grid. Stp Graphikart tu utilises quel éditeur de texte dans cette tuto ?

[@ВладимирБекович]

MULTICODE Grafikart *, c'est visual studio code, mais je te conseil webstorm ou tout outils de jetbrains

[@MULTICODE]

Владимир Биековицш pourquoi me conseille tu webstorm ? Pourquoi cette préférence ? Merci, un lien à l'appui pour le téléchargement de webstorm

[@ВладимирБекович]

MULTICODE car visual studio code est un éditeur de texte, alors que webstorm est un Environnement de Développement Intégré, jetbrains.com

[@MULTICODE]

Владимир Биековицш merci et si possible un lien vers la documentation mozilla sur le système de grid que graphikart nous montrait sur sa vidéo certains propriété de grid

[@MULTICODE]

Stp, une fois de plus merci beaucoup

[@xaviertomasi3716]

très bonne vidéo :). peut être en faire une en créant une page a partir d'un modèle avec les GRID ca permettrait de mieux visualiser le comportement !. Merci

[@hassanchaou5268]

merci beaucoup frere

[@justbendev2324]

Merci , Super vidéo comme d'hab mais j'ai une petite question : Quand utiliser Grid et quand utiliser Flexbox ? ^^

[@FuckingFrenchBastard]

Si tu regardes son code source (sur son site), tu vois qu'il utilise les deux. Le positionnement du squelette de base (header, content, sidebar, footer) est en display flex et à l'intérieur de son content, il utilise un display grid.

[@saralouazo8928]

Alsacreations a rédigé un article sur Flexbox ou Grid Layout, il est super. Bon tu as du trouver in the meantime ;-)

[@sookiezboly4502]

@@FuckingFrenchBastard Ce n'est pas plutôt l'inverse que l'on devrait faire ? le squelette général en grid et l'interieur en flex..

[@negzoo]

Bonsoir, du coup entre flexbox et grid qui ont le même principe on choisit celui qui nous convient le mieux la finalité sera la même c’est bien ça ?

[@grafikart]

Il faut connaitre les 2 car les 2 sont utiles suivant la situation.

[@digitalvenix8943]

salut, j'ai pas très bien entendu quel IDE tu utilisais pour faire ca

[@fernandperceval2477]

ah ouai génial !

[@benoitcanevet383]

Bonjour, comment on peut faire des offset à la bootstrap avec grid ? J'ai essayé pendant des jours et je n'est toujours pas trouvé. Merci de votre aide

[@lowax]

love grid forever !

[@makidoko]

Désespérant de voir que dans les commentaires que nombre de personnes se désolent de la non compatibilité de IE... Et alors? Cessez simplement de prendre en compte IE dans vos développements. C'est cette frilosité des développeurs qui tire la bride technologique. Prévoyez juste dans votre page un lien vers browsehappy.com par exemple dont l'affichage est soumis à un @supports (display:grid) { #updateUrFakinBrowser {display : none;}}. Voilà à mon sens le seul effort de support de l'obsolescence à assurer. Tant de temps et d'argent dépensés pour s'assurer qu'une infime partie de la population, qui ne visitera jamais votre site, puisse avoir le même résultat visuel que tout le monde. Stop NOW!

[@aureliencar]

Maki Doko ce ne sont pas les développeurs qui veulent assurer la compatibilité avec IE... Ce sont les clients ! Et quand tu bosses sur une appli métier utilisé dans un grand groupe qui impose IE, et bien tu te plies aux exigences...

[@makidoko]

Ariélien Caruel, j'ai connu, les grandes boites en carton qui s'accrochent à IE 4 (oui, oui IE 4, jusqu'en 2016)... Du coup tout les employés téléchargeaient Firefox ou Chrome et recréaient leurs raccourcis et banques de favoris pour pouvoir travailler dans de bonnes conditions, car les applicatifs n'étaient simplement pas dépendant d'IE 4, seuls les DSI l'étaient. Leur argumentaire était celui de la phase nécessaire de tests qui impliquait une dépense d'ingénierie dispensable au vu de la solution retenue en place. Sachant qu'aucun audit préalable n'avait jamais été fait pour choisir IE 4, que le choix a été fait parce qu'ils ne connaissaient rien d'autre à l'époque. Et oser présenter cet état de fait comme issu d'une réflexion poussée est du foutage de gueule. Il y a des salaires qui ne se justifient pas en dehors du statut porté sur la fiche de salaire. On ne parle pas d'un système d'exploitation archaïque particulier, ou d'un langage métier spécifique et des applications critiques, pour lesquels la compliance aux solutions en place s'impose. Il s'agit d'un simple navigateur, dont les très éventuels composants spécifiques (ActiveX par exemple) peuvent être aisément remplacés, assurant une vraie pérennité des applicatifs et une maintenabilité en phase avec les compétences opérationnelles modernes. En résumé, le client a toujours tord. C'est au chef de projet d'apporter les solutions ;)

[@jerembardonify]

Je suis à 100% derrière cette réflexion. Même si Microsoft à déployé beaucoup d'efforts pour les outils de développement dernièrement on ne peut que constater l’obsolescence d'IE.

[@saralouazo8928]

Old Night a parlé. (Référence à la pieuvre dans la série The OA, ton favicon me penser à ça)

[@bryoou7169]

ça à l'air tellement simple en te regardant....

[@climba6968]

Bonjour, sais tu comment faire pour superposer des éléments en chevauchement sur une grille de grid ? Si on reprend ton exemple à la fin et que je désire mettre une photo en décalé sur l'aside et le main. Je te remercie !

[@castelv272]

gg

[@honeymassey3037]

Thanks, Sir😇😇

[@becayekeita6681]

Bonjour moi c Bécaye je veux savoir si css grid est compatible avec tout les navigateur web google en particulier merci !

[@grafikart]

Tu peux jeter un oeil ici caniuse.com/#feat=css-grid

[@mondondavykodjo9311]

merci bien .

[@ttRmz]

Après un gros coup de cœur pour la flexbox, maintenant j’hésite à passer aux grids, mmmh...

[@ВладимирБекович]

Tristan Rmz la même x)

[@makidoko]

Ce sont deux concepts d'objectif différent. Il n'y a donc pas de question à se poser sur l'utilisation de l'un ou de l'autre. C'est un peu le souci avec les nouvelles inclusions dans les règles CSS, c'est que beaucoup pensent que la nouveauté remplace l'existant. Donc la seule question à se poser est celle du besoin : - Box-model : flow normal - Flexbox : flow distributif - Grid : mise en page Et il n'en parle pas dans la vidéo, mais la grid implique un grand pouvoir donc une grande responsabilité : la cohérence du flux et du rendu visuel, notamment pour l'accessibilité.

[@saralouazo8928]

Tristan Ramirez drogue dure. Les deux.

[@kbarfleur]

Sérieux, pourquoi le projet IE n'est pas abandonné... ça devient fatiguant.

[@lmz-dev]

Le pire est qu'il y a plus d'utilisateurs de IE (3.20%) que de Edge (2%) ^^

[@Klilkaiser]

je suis tellement d'accord ça me les brise ...

[@R4nge3r]

Tu connais les vieux. Ils ne veulent pas changer. Dans 15 ans . . .

[@lmz-dev]

Il a pu passer sur Edge car il n'est pas sous XP, Seven ou vista ! Le problème c'est Microsoft, pas les vieux ;p

[@VincentDeverre]

Toute ces nouvelles méthodes sont géniales mais on ne peut les utiliser si l'on veut que notre site web touche le plus grand nombre. A l'heure actuelle beaucoup de personnes ont encore de vieux navigateurs. Je bosse avec plusieurs centaines d'utilisateurs et je vois bien tous les problèmes que ça pose. Bref, avant que j'utilise des grid je serais à la retraite :-D

[@jeromesnail]

L'utilisation d'Internet explorer reste quand même très marginale aujourd'hui... Pour les navigateurs récents, ils se mettent à jour automatiquement donc pas réellement de problèmes à ce niveau là non plus.

[@R4nge3r]

Alsacreation en parle aussi et met a disposition un cheatsheet

[@grafikart]

N'hésite pas à me fournir le lien comme ça je l'ajoute à l'article et ça aide les autres ;)

[@R4nge3r]

Le voilà. www.alsacreations.com/outils/lire/1763-grid-layout-cheat-sheet-pense-bete.html Sinon pourquoi beaucoup de site tuto/news about css en parle maintenant ? ^^

[@klesk44]

Vous le voyez venir bootstrap 5 ;)

[@EnzoReno77]

Salut rien a voir avec la vidéo, mais j'aimerai savoir comment créer un formulaire de recherche (choisir marque ; modèle et motorisation) qui renvoie a une page html de mon site par rapport au dernier chant de celui-ci. Merci d'avance

[@mechanicalseu]

Il a fait une vidéo dans laquelle il lie plusieurs select en ajax, il le fait pour des villes mais tu peux l'adapter pour les voitures / Tutoriel JavaScript : Lier plusieurs select en Ajax

[@laurent3029]

Quel est votre éditeur de texte svp??

[@videos-lf6on]

bonjour a tous je ne sais pas j'aurais une réponse ici mais je tente quand même En fait j'utilise KOMODO EDIT 12 et les seule propriétés qu'il me propose sont grid-colums et grid-rows et rien d'autres est-ce que quelqu'un à une solution pour qu'il me propose toute les autres propriétés ? merci à tous

[@nicofromtheweb4891]

Internet Explorer = le browser qui me permet de DL Mozilla quand j'installe windows et qui disparait de ma vie ensuite.

[@NdoubayoNoudjihidjiFranklin]

Salut s'il vous plait pourriez-vous m'aider? Comment faire pour avoir de l'espace entre conteneur-contenant avec comme le permet les propriétés marging et padding avec display flex...

[@hyugoro5014]

Assez tard comme réponse 😂 Solution: utilise gap: 15px(par exemple). Fonctionne aussi, si tu utilises le display: flex

[@becayekeita6681]

pouvez vous me le dire par ce que je ne sais pas utiliser can I use

[@AlainMazy]

Bonnjour, ce langage (API) je le trouve où? c'est du HTML5 d'origine?

[@grafikart]

C'est du CSS developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

[@peristiloperis7789]

Tu expliques très bien, mais c'est dommage que tu vas trop vite.

[@saralouazo8928]

Peristilo peris C’est sans doute pour ça que Ned Stark est mort, il trouvait que ça allait trop vite. Désolé pas d’offense c’est juste j’ai pas pu m’empêcher en voyant ton favicon ! Sinon moi aussi j’ai du mal à suivre de temps en temps ;-)

[@R4nge3r]

A quand une video avec des trucs Css, js, php,... ?un meltingpot

[@AlainMazy]

où avez-vous trouvé l'autocomplétion??

[@upsylondeveloppement8837]

Emmet - emmet.io/ il est déjà intégré dans visual studio code ;-)

[@saralouazo8928]

Emmet is God.

[@Madmadfr]

Pourquoi je dois faire du support IE :'(

[@paullefebvre6667]

Je déteste INTERNET EXPLORER.

[@chucklo7618]

et ton coiffeur il est ou ?

[@grafikart]

.grafikart { coiffeur: none; }

[@chucklo7618]

@@grafikart mdr t es le meilleur 👌

[@adriendfn6316]

Merci

[@thibaultboutaud5216]

Merci