Tutoriel CSS : display: grid;

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 พ.ย. 2024

ความคิดเห็น • 123

  • @32000cd
    @32000cd 2 ปีที่แล้ว +7

    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
    @developpeurfront-end3681 3 ปีที่แล้ว +2

    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
    @vianney_fpv 3 ปีที่แล้ว +1

    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
    @667crypto5 2 ปีที่แล้ว +1

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

  • @MrBonbatong
    @MrBonbatong 3 ปีที่แล้ว +7

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

  • @MrMoonshineS
    @MrMoonshineS 6 ปีที่แล้ว +38

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

  • @paulmeyer9955
    @paulmeyer9955 3 ปีที่แล้ว +2

    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
      @arnaques-tuto-informatique 2 ปีที่แล้ว

      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.

  • @Gjffza
    @Gjffza 6 ปีที่แล้ว +6

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

  • @fatimameziane5385
    @fatimameziane5385 2 ปีที่แล้ว

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

  • @huguolin2543
    @huguolin2543 5 ปีที่แล้ว +2

    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

  • @LesTutossUE4
    @LesTutossUE4 6 ปีที่แล้ว +23

    Si vous voulez vous entraîner : cssgridgarden.com

  • @pachko7164
    @pachko7164 5 ปีที่แล้ว +2

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

    • @saralouazo8928
      @saralouazo8928 4 ปีที่แล้ว

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

  • @Bobywoodwarrior
    @Bobywoodwarrior 6 ปีที่แล้ว +4

    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
    @saralouazo8928 4 ปีที่แล้ว +3

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

  • @benlebowski1929
    @benlebowski1929 4 ปีที่แล้ว +1

    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
    @JarlHelin 2 ปีที่แล้ว

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

  • @AliceGaudon
    @AliceGaudon 6 ปีที่แล้ว +4

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

  • @michaelplichart3224
    @michaelplichart3224 3 ปีที่แล้ว +1

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

  • @jeanlefebvre1181
    @jeanlefebvre1181 4 ปีที่แล้ว +2

    super pratique pour le responsive mobile first

  • @Hepasta
    @Hepasta 6 ปีที่แล้ว +1

    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

  • @john-mikecourteaud9772
    @john-mikecourteaud9772 3 ปีที่แล้ว +1

    Un énorme merci

  • @daniellasansouci6744
    @daniellasansouci6744 ปีที่แล้ว

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

  • @emilie1977
    @emilie1977 6 ปีที่แล้ว +5

    Le CSS commence à me plaire

    • @florianm22
      @florianm22 6 ปีที่แล้ว +4

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

    • @saralouazo8928
      @saralouazo8928 4 ปีที่แล้ว

      Florian c’est clair punaise

  • @kurisu-game
    @kurisu-game 2 ปีที่แล้ว

    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
    @electroheadfx 3 ปีที่แล้ว +1

    beau tuto, merci

  • @e-genieclimatique
    @e-genieclimatique 4 ปีที่แล้ว +1

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

  • @makidoko
    @makidoko 6 ปีที่แล้ว +5

    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!

    • @aureliencaruel8986
      @aureliencaruel8986 6 ปีที่แล้ว

      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
      @makidoko 6 ปีที่แล้ว +3

      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
      @jerembardonify 6 ปีที่แล้ว +1

      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
      @saralouazo8928 4 ปีที่แล้ว

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

  • @guichburton5282
    @guichburton5282 3 ปีที่แล้ว +1

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

  • @LudovicGodard
    @LudovicGodard 6 ปีที่แล้ว +1

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

  • @_Greenflag_
    @_Greenflag_ 2 ปีที่แล้ว

    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)

  • @asmaenacer2062
    @asmaenacer2062 3 ปีที่แล้ว

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

  • @Sql37
    @Sql37 2 ปีที่แล้ว

    Merci à toi, très clair !

  • @justbendev2324
    @justbendev2324 5 ปีที่แล้ว +3

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

    • @FuckingFrenchBastard
      @FuckingFrenchBastard 4 ปีที่แล้ว +3

      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
      @saralouazo8928 4 ปีที่แล้ว

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

    • @sookiezboly4502
      @sookiezboly4502 2 ปีที่แล้ว +1

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

  • @MULTICODE
    @MULTICODE 6 ปีที่แล้ว +2

    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 ?

    • @ВладимирБекович
      @ВладимирБекович 6 ปีที่แล้ว

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

    • @MULTICODE
      @MULTICODE 6 ปีที่แล้ว

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

    • @ВладимирБекович
      @ВладимирБекович 6 ปีที่แล้ว

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

    • @MULTICODE
      @MULTICODE 6 ปีที่แล้ว

      Владимир Биековицш 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
      @MULTICODE 6 ปีที่แล้ว

      Stp, une fois de plus merci beaucoup

  • @YannSt
    @YannSt 6 ปีที่แล้ว +4

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

  • @lilprim45
    @lilprim45 3 ปีที่แล้ว

    Encore un tuto super clair !

  • @mercierthomas6789
    @mercierthomas6789 5 ปีที่แล้ว

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

  • @xaviertomasi3716
    @xaviertomasi3716 3 ปีที่แล้ว

    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

  • @minute_illimitee
    @minute_illimitee 5 ปีที่แล้ว

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

  • @leopng
    @leopng 6 ปีที่แล้ว +1

    Super vidéo, très clair

  • @negzoo
    @negzoo 3 ปีที่แล้ว +1

    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
      @grafikart  3 ปีที่แล้ว +1

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

  • @benoitcanevet383
    @benoitcanevet383 5 ปีที่แล้ว +1

    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

  • @kbarfleur
    @kbarfleur 6 ปีที่แล้ว +13

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

    • @lmz-dev
      @lmz-dev 6 ปีที่แล้ว +4

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

    • @Klilkaiser
      @Klilkaiser 6 ปีที่แล้ว +1

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

    • @R4nge3r
      @R4nge3r 6 ปีที่แล้ว +1

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

    • @lmz-dev
      @lmz-dev 6 ปีที่แล้ว +5

      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

  • @ange550
    @ange550 3 ปีที่แล้ว +1

    Merci

  • @digitalvenix8943
    @digitalvenix8943 4 ปีที่แล้ว +1

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

  • @OFR5086
    @OFR5086 3 ปีที่แล้ว

    merci super vidéo clair !

  • @yklash
    @yklash 6 ปีที่แล้ว +3

    merci infiniment

  • @creedsa9520
    @creedsa9520 3 ปีที่แล้ว

    bonne explication ! bravo!

  • @Pentiminax
    @Pentiminax 5 ปีที่แล้ว

    Super tuto, très intéressant !

  • @yassineejjoud4201
    @yassineejjoud4201 2 ปีที่แล้ว

    Thank you for sharing such great value

  • @MouhamadouDer
    @MouhamadouDer 6 ปีที่แล้ว +1

    Cool la vidéo

  • @bryoou7169
    @bryoou7169 6 ปีที่แล้ว +1

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

  • @climba6968
    @climba6968 4 ปีที่แล้ว

    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 !

  • @ttRmz
    @ttRmz 6 ปีที่แล้ว +3

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

    • @ВладимирБекович
      @ВладимирБекович 6 ปีที่แล้ว

      Tristan Rmz la même x)

    • @makidoko
      @makidoko 6 ปีที่แล้ว +4

      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
      @saralouazo8928 4 ปีที่แล้ว

      Tristan Ramirez drogue dure. Les deux.

  • @hassanchaou5268
    @hassanchaou5268 4 ปีที่แล้ว

    merci beaucoup frere

  • @castelv272
    @castelv272 2 ปีที่แล้ว

    gg

  • @becayekeita6681
    @becayekeita6681 6 ปีที่แล้ว +1

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

    • @grafikart
      @grafikart  6 ปีที่แล้ว +1

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

  • @fernandperceval2477
    @fernandperceval2477 6 ปีที่แล้ว

    ah ouai génial !

  • @lowax
    @lowax 5 ปีที่แล้ว

    love grid forever !

  • @R4nge3r
    @R4nge3r 6 ปีที่แล้ว +1

    Alsacreation en parle aussi et met a disposition un cheatsheet

    • @grafikart
      @grafikart  6 ปีที่แล้ว +1

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

    • @R4nge3r
      @R4nge3r 6 ปีที่แล้ว

      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
    @klesk44 6 ปีที่แล้ว +1

    Vous le voyez venir bootstrap 5 ;)

  • @VincentDeverre
    @VincentDeverre 6 ปีที่แล้ว +1

    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
      @jeromesnail 5 ปีที่แล้ว

      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.

  • @honeymassey3037
    @honeymassey3037 5 ปีที่แล้ว

    Thanks, Sir😇😇

  • @videos-lf6on
    @videos-lf6on 4 ปีที่แล้ว

    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

  • @enzhumeur2804
    @enzhumeur2804 6 ปีที่แล้ว

    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
      @mechanicalseu 6 ปีที่แล้ว

      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

  • @peristiloperis7789
    @peristiloperis7789 5 ปีที่แล้ว +2

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

    • @saralouazo8928
      @saralouazo8928 4 ปีที่แล้ว

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

  • @mondondavykodjo9311
    @mondondavykodjo9311 6 ปีที่แล้ว

    merci bien .

  • @R4nge3r
    @R4nge3r 6 ปีที่แล้ว

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

  • @NdoubayoNoudjihidjiFranklin
    @NdoubayoNoudjihidjiFranklin 2 ปีที่แล้ว

    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
      @hyugoro5014 2 หลายเดือนก่อน

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

  • @laurent3029
    @laurent3029 5 ปีที่แล้ว

    Quel est votre éditeur de texte svp??

  • @AlainMazy
    @AlainMazy 6 ปีที่แล้ว

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

    • @grafikart
      @grafikart  6 ปีที่แล้ว

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

  • @becayekeita6681
    @becayekeita6681 6 ปีที่แล้ว

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

  • @nicofromtheweb4891
    @nicofromtheweb4891 3 ปีที่แล้ว

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

  • @AlainMazy
    @AlainMazy 6 ปีที่แล้ว

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

  • @Madmadfr
    @Madmadfr 6 ปีที่แล้ว

    Pourquoi je dois faire du support IE :'(

  • @paullefebvre6667
    @paullefebvre6667 6 ปีที่แล้ว +5

    Je déteste INTERNET EXPLORER.

  • @chucklo7618
    @chucklo7618 4 ปีที่แล้ว

    et ton coiffeur il est ou ?

    • @grafikart
      @grafikart  4 ปีที่แล้ว +7

      .grafikart {
      coiffeur: none;
      }

    • @chucklo7618
      @chucklo7618 4 ปีที่แล้ว

      @@grafikart mdr t es le meilleur 👌

  • @adriendfn6316
    @adriendfn6316 2 ปีที่แล้ว

    Merci

  • @thibaultboutaud5216
    @thibaultboutaud5216 ปีที่แล้ว

    Merci