Tutoriel CSS : display: grid;
HTML-код
- Опубликовано: 3 май 2018
- Article ► grafikart.fr/tutoriels/grid-c...
Abonnez-vous ► bit.ly/GrafikartSubscribe
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/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat 
Наука
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.
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
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
Merci pour le travail, tu es une pepite pour tout les apprentis dev francophone c'est fou
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é ! :-)
Merci pour ces supers tutos! Ton approche pédagogue est excellente, bien mieux que certaines formations payantes d'ailleurs!
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
Très bonne vidéo, ça doit te prendre du temps et donc merci pour tout ce boulot. C'est génial.
Merci beaucoup, vidéo de qualité et des explications au top. Ça donne envie de mettre la main à la pâte ! ;)
Merci pour le partage ! Vous êtes génial.
T'es extraordinaire comme gars. Tout parait simple quand tu le fait.
#Exatement!
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 ;)
Tuto parfait ! Dommage qu'il n'a pas était publié en Janvier pour pouvoir réussir mon projet avec une facilité de compréhension...
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
Tu nous gave de bon miel ...merci ;)
Super vidéo, très clair
un grand merci, je captais pas avant de voir avec toi pfiou ^^
C'est si bien ! J'ai plus envie de faire quoi que ce soit d'autre que des grid maintenant /o/
Super tuto, très intéressant !
Si vous voulez vous entraîner : cssgridgarden.com
mrc
merci grâce a ce tutoriel j'ai enfin compris les Grid... good luck
Encore un tuto super clair !
excellente vidéo , elle m'a bien aidé
grid-template-areas => BADASS
Merci pour cette vidéo de qualité, comme d'hab!
Pachko ouais c’est là que j’ai pleuré
Un énorme merci
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 ;)
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.
beau tuto, merci
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.
Merci beaucoup tu m'as énormément aidé
Merci à toi, très clair !
bonne explication ! bravo!
Cool la vidéo
merci infiniment
merci super vidéo clair !
super pratique pour le responsive mobile first
Thank you for sharing such great value
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
Flexbox : content is king.
Grid Layout : container is king.
😉
Le CSS commence à me plaire
Avec grid et flexbox on peut enfin prendre plaisir à faire du layout et plus s'y arracher les cheveux ^^
Florian c’est clair punaise
ah ouai génial !
merci beaucoup frere
Un vieux devfront qui reprend la nouveauté de GRID (un peu en retard) Bravo pour cette explication!
salut,
j'ai pas très bien entendu quel IDE tu utilisais pour faire ca
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
love grid forever !
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 !
Merci
bonjour merci pour ton cours très clair et explicite. Donne tu des cours et as-tu une convention avec pôle emploi
Thanks, Sir😇😇
pouvez vous me le dire par ce que je ne sais pas utiliser can I use
Je vote pour un tuto portfolio masonry en display grid :)
Yann St 😅
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)
ça à l'air tellement simple en te regardant....
merci bien .
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 ?
Il faut connaitre les 2 car les 2 sont utiles suivant la situation.
chaud
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
Владимир Биековицш 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
Владимир Биековицш 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
Stp, une fois de plus merci beaucoup
Merci , Super vidéo comme d'hab mais j'ai une petite question : Quand utiliser Grid et quand utiliser Flexbox ? ^^
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.
Alsacreations a rédigé un article sur Flexbox ou Grid Layout, il est super.
Bon tu as du trouver in the meantime ;-)
@@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..
Pourquoi je dois faire du support IE :'(
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
gg
Bonjour moi c Bécaye je veux savoir si css grid est compatible avec tout les navigateur web google en particulier merci !
Tu peux jeter un oeil ici caniuse.com/#feat=css-grid
Quel est votre éditeur de texte svp??
Vous le voyez venir bootstrap 5 ;)
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
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
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...
Sérieux, pourquoi le projet IE n'est pas abandonné... ça devient fatiguant.
Le pire est qu'il y a plus d'utilisateurs de IE (3.20%) que de Edge (2%) ^^
je suis tellement d'accord ça me les brise ...
Tu connais les vieux. Ils ne veulent pas changer. Dans 15 ans . . .
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
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)
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é.
Tristan Ramirez drogue dure. Les deux.
A quand une video avec des trucs Css, js, php,... ?un meltingpot
Bonnjour, ce langage (API) je le trouve où? c'est du HTML5 d'origine?
C'est du CSS developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
c'est quoi ton éditeur stp
où avez-vous trouvé l'autocomplétion??
Emmet - emmet.io/ il est déjà intégré dans visual studio code ;-)
Emmet is God.
Alsacreation en parle aussi et met a disposition un cheatsheet
N'hésite pas à me fournir le lien comme ça je l'ajoute à l'article et ça aide les autres ;)
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 ? ^^
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
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.
Tu expliques très bien, mais c'est dommage que tu vas trop vite.
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 ;-)
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!
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...
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 ;)
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.
Old Night a parlé.
(Référence à la pieuvre dans la série The OA, ton favicon me penser à ça)
Internet Explorer = le browser qui me permet de DL Mozilla quand j'installe windows et qui disparait de ma vie ensuite.
Je déteste INTERNET EXPLORER.
et ton coiffeur il est ou ?
.grafikart {
coiffeur: none;
}
@@grafikart mdr t es le meilleur 👌
Merci
Merci