Tutoriel CSS : display: grid;

[@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

[@667crypto5]

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

[@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

[@MrBonbatong]

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

[@LesTutossUE4]

Si vous voulez vous entraîner : cssgridgarden.com

[@chapristi4116]

mrc

[@MrMoonshineS]

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

[@djangolikid473]

#Exatement!

[@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 ;)

[@arnaques-tuto-informatique]

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.

[@fatimameziane5385]

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

[@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

[@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é

[@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...

[@john-mikecourteaud9772]

Un énorme merci

[@jeanlefebvre1181]

super pratique pour le responsive mobile first

[@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 ;)

[@saralouazo8928]

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

[@_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)

[@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

[@e-genieclimatique]

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

[@electroheadfx]

beau tuto, merci

[@michaelplichart3224]

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

[@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é ! :-)

[@JarlHelin]

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

[@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

[@LudovicGodard]

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

[@digitalvenix8943]

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

[@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.

[@guichburton5282]

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

[@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.

[@minute_illimitee]

Tu nous gave de bon miel ...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

[@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

[@ange550]

Merci

[@Sql37]

Merci à toi, très clair !

[@leopng]

Super vidéo, très clair

[@asmaenacer2062]

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

[@lilprim45]

Encore un tuto super clair !

[@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

[@YannSt]

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

[@saralouazo8928]

Yann St 😅

[@Pentiminax]

Super tuto, très intéressant !

[@mercierthomas6789]

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

[@creedsa9520]

bonne explication ! bravo!

[@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 !

[@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..

[@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

[@MouhamadouDer]

Cool la vidéo

[@OFR5086]

merci super vidéo clair !

[@yklash]

merci infiniment

[@laurent3029]

Quel est votre éditeur de texte svp??

[@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)

[@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

[@becayekeita6681]

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

[@enzhumeur2804]

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

[@hassanchaou5268]

merci beaucoup frere

[@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

[@yassineejjoud4201]

Thank you for sharing such great value

[@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.

[@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

[@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

[@lowax]

love grid forever !

[@fernandperceval2477]

ah ouai génial !

[@bryoou7169]

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

[@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

[@Madmadfr]

Pourquoi je dois faire du support IE :'(

[@castelv272]

gg

[@klesk44]

Vous le voyez venir bootstrap 5 ;)

[@honeymassey3037]

Thanks, Sir😇😇

[@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 ? ^^

[@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.

[@mondondavykodjo9311]

merci bien .

[@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

[@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.

[@nicofromtheweb4891]

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

[@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