Create Responsive CSS Grid Layouts with GRID WRAPPING

Поділитися
Вставка
  • Опубліковано 4 гру 2024

КОМЕНТАРІ • 108

  • @FzsHotDogInDonut
    @FzsHotDogInDonut 3 місяці тому +66

    This is absolute brilliant.
    if anyone wondering how to write it in tailwind I will leave the code here,
    grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-10

  • @JeanDidier
    @JeanDidier Місяць тому +10

    Knowing this fixes 80% of css problems, at least for me ;)

  • @ColinRichardson
    @ColinRichardson Місяць тому +2

    The moment I heard "auto-fit" exists, I had already wondered if minmax would work.
    Thank you for the information.

  • @Dexter101x
    @Dexter101x 3 місяці тому +20

    I can't wait for your CSS Grid series. I'm always bamboozled by grid and flex

  • @_tingExE
    @_tingExE 3 місяці тому +4

    WOW, that autofit is so good. I didn't think of that, I always do the column count per media property. Thanks for this

  • @Laura-001
    @Laura-001 3 місяці тому +1

    I have to say as well thank you. Previously, I was using media queries and a fixed number of columns but this makes it much easier. One tip, if you have a row with less items, use auto-fill and it won't stretch to the total width of the container. Looks way better!

  • @mr.__rwicha
    @mr.__rwicha Місяць тому +1

    This video deserves a million of views

  • @examplewastaken
    @examplewastaken 3 місяці тому +1

    Its not often that I watch two videos and sub...incredible work mate!

  • @Dhanjeerider
    @Dhanjeerider 3 місяці тому +4

    All magic based on the
    :reapet(auto-fit, minmax(300px, 1fr)); ❤

  • @nickolaizein7465
    @nickolaizein7465 3 місяці тому +4

    Yes, please grid, more grids 😊

  • @iDoc_Elf
    @iDoc_Elf 13 днів тому

    Very useful! I've been looking for this for so long.

  • @JackDaniels08
    @JackDaniels08 Місяць тому +1

    Ngl bro, you explain everything really well.

  • @ВикторСледник
    @ВикторСледник 3 місяці тому +1

    Fabian, your css courses are the most useful I've ever found so far. Thank you a lot 🙏🙏🙏

  • @1day_with_nature
    @1day_with_nature 3 місяці тому +1

    Very straight forward, love it

  • @NapKingCole84
    @NapKingCole84 3 місяці тому +1

    I've seen auto-fit and min-max in a tutorial before (hi Kevin), but you broke it down here very well and gave me the "aha" moment where it all clicked. Subscribed! Thanks

  • @CyberTechBits
    @CyberTechBits Місяць тому +2

    @Coding2GO great video. I've been using this strategy for quite some time now. It's fantasit for product cards. One thing I've had to do is to add max-width between 1200px and 1400px along with margin-inline auto as opposed to justify content center so it won't keep adding columns when you get past those screen sizes. HTHs. Great stuff my friend!

  • @relaxing8599
    @relaxing8599 3 місяці тому +1

    wow. you have explained very well . thanks a lot

  • @IwujiGoodluck
    @IwujiGoodluck 2 дні тому

    Thanks alot, for this amazing tutorial now time to put into practice

  • @MyLearnYard
    @MyLearnYard 7 днів тому

    bro your videos are super awesome, just love it

  • @Devil_02-es9oy
    @Devil_02-es9oy 3 місяці тому +1

    Sir you are my fav coder ❤❤

  • @TusharBirole
    @TusharBirole 3 місяці тому +1

    Thank you so much great explanation.

  • @BegençÝazdurdyýew
    @BegençÝazdurdyýew 2 місяці тому

    The best web dev channel, everything is explained clearly👍

  • @keochanmarido188
    @keochanmarido188 3 місяці тому +1

    Really love your video. keep up the good work

  • @mhuzaifa6040
    @mhuzaifa6040 3 місяці тому +2

    Thanks man❤

  • @ghala03
    @ghala03 3 місяці тому +1

    Yeeeessss!! this is what I was waiting for 🎉🎉🎉

  • @milanmakawana637
    @milanmakawana637 3 місяці тому +1

    Thank you so much 🥰😇😇🥰

  • @danielgago-sk
    @danielgago-sk 3 місяці тому +2

    One "minmax" instruction and 20 rows of css code with @media in my project get out... Not bad... 🙂 Thanks

  • @itx_mhassan
    @itx_mhassan 20 днів тому

    These videos help alot
    Thank you sir ❤

  • @bmjhayward
    @bmjhayward Місяць тому

    exactly what i was lookin for thankyou legend

  • @MuhammadBilal-d5j
    @MuhammadBilal-d5j 3 місяці тому +1

    love the way you explain

  • @SkyV77
    @SkyV77 3 місяці тому +2

    fav channel

  • @julienheng3880
    @julienheng3880 2 місяці тому

    Hey your tutorials are amazing! You just have gained another fan lol

  • @ikramali425
    @ikramali425 3 місяці тому +1

    Brother Such a long and complex topic you just Explain in 6 min. Amazing Man🎉. You got a new subscriber ❤

  • @ZiafatAli
    @ZiafatAli 3 місяці тому +1

    Huge respect man 🎉

  • @kareembamidele4804
    @kareembamidele4804 3 місяці тому +1

    I always look forward to ur videos, it has really make me better as a developer 🎉

  • @MOHAMMEDKHALANDER-g1c
    @MOHAMMEDKHALANDER-g1c 3 місяці тому +1

    Ohhh My Goodness, last time we all commented for this video and here we got it
    We just love you sir, We are not getting how to thank you sir 😭😭😭😭😭😭
    Thank you so much, love from every coder :) 💖💖
    And one small doubt, Can we just have some more videos on grid, like covering even some other topics in grid
    please,

  • @diegopelicce
    @diegopelicce 15 днів тому

    awesome, thanks a lot for that!

  • @ikbo
    @ikbo 3 місяці тому

    You should do a course on modern web layouts and how to implement them. Basically layout patterns and how to implement them with modern css. Would pay for this.

  • @felixurbano1199
    @felixurbano1199 3 місяці тому +1

    Excellent explanation! Thanks for share it

    • @coding2go
      @coding2go  3 місяці тому

      Glad it was helpful!

  • @azamcangame5253
    @azamcangame5253 3 місяці тому +2

    Zabardast!🤩🤩

  • @enenotowitch628
    @enenotowitch628 Місяць тому

    5:36: grid-container

  • @rkkalhoro65
    @rkkalhoro65 3 місяці тому +1

    Very helpful 👌

  • @Solo_playz
    @Solo_playz 3 місяці тому +41

    Bro you are increasing my knowledge around CSS that my friends will take more 50 years to get there 😂😂😂

    • @jeremygl1569
      @jeremygl1569 2 місяці тому +1

      It means you and your friends should return to a good computer science school to learn the basics of CSS. This video still has mistakes, since using pixels is very bad practice... So that would also take you 50y to learn if you didn't go to a proper school

    • @gunasekharrongali1870
      @gunasekharrongali1870 Місяць тому

      😂😂 well said

    • @oladipupoibrahim2128
      @oladipupoibrahim2128 Місяць тому

      ⁠​⁠@@jeremygl1569since you said is a bad practice , I guess you should correct us here lol

    • @jeremygl1569
      @jeremygl1569 Місяць тому

      @@oladipupoibrahim2128 You found this video which means you try to become a programmer, right? Then, if you try to become one, then also act like one: DYOR.
      Do you know what that means?: Do Your Own Research.
      Why ask me and hope to get an answer while the only thing you should have done instead of writing me is searching on the youtube why pixels are bad practice. Is it that hard? I am not your tutor, be your own tutor.
      All i can say to everyone reading this comment: I am now a 3rd year software engineer student at one of the best schools in Europe for IT, and when any of the teachers sees ANYWHERE the use of pixels, we get an immediate zero.

  • @arsheikh_insight
    @arsheikh_insight Місяць тому

    Awesome tutotial !

  • @FarhatMustafa-gd8fp
    @FarhatMustafa-gd8fp 2 місяці тому

    Very Helpful 😍

  • @KamranAli-p8c
    @KamranAli-p8c 2 місяці тому

    Thanks for your this video

  • @gabrielfranzen1589
    @gabrielfranzen1589 6 днів тому

    Thank you

  • @7oda_alnakeeb
    @7oda_alnakeeb 3 місяці тому +1

    Bro got a master degree in css

  • @imetiiii
    @imetiiii 5 днів тому

    amazing ❤❤

  • @gareth2021
    @gareth2021 11 днів тому

    thanks

  • @chill_orange8374
    @chill_orange8374 3 місяці тому +1

    FIRST COMMENT. THANK YOU FOR MAKING THIS!!

  • @keshavshiyal7850
    @keshavshiyal7850 Місяць тому

    Excellent sir, inshort ...

  • @KaranOdedra
    @KaranOdedra 3 місяці тому +3

    Nice.
    One question tho: how do we use the same strategy to get the width of the first column to be 33% and the second column to be 66%?

  • @MuhammadOkasha-r1u
    @MuhammadOkasha-r1u 3 місяці тому +1

    It's too good man

  • @Nafijad96
    @Nafijad96 3 місяці тому +1

    When will you launch the Javascript course?

  • @S.A.F707
    @S.A.F707 3 місяці тому +1

    Absolutely informative 👍🏻. Can we make a website layout with grid? Like a navbar/header sidebar,sections of content and a footer all by using grid?

    • @coding2go
      @coding2go  3 місяці тому +1

      Yes, absolutely. I would recommend to use grid-template-areas for that.

    • @ggamos9831
      @ggamos9831 25 днів тому

      @@coding2go Thank you Fabian for an excellent and concise demonstration of the auto-fit and minmax function. I was also wondering about complete layouts as S.A.F707 asked about. I have built a few pages of my website using grid-template-areas but have used a media query for mobile to make it reduce to 1 column. It does that, but I have to adjust many things, like reducing font-size, padding, margins etc.. and the result is that some pages look wider than others .. I can't get the pages to look the same size in the basic layout.
      Could this be a padding problem? I have a suspicion that padding is a culprit. That's a bit confusing for novice site builders ;-)
      Or do you have a course to explain how to get consistent page layout sizes? Thanks kindly!

  • @mussachitemo
    @mussachitemo 2 місяці тому

    Subscription button 🎉😂, thank you

  • @vladvasil27
    @vladvasil27 3 місяці тому +2

    Can I do the same but the number of columns will depend on the widest element? The width is not known in advance, for example in a grid of different image sizes

  • @kunaldhamiwal6717
    @kunaldhamiwal6717 3 місяці тому +1

    Fab ❤

  • @MetroExodus999
    @MetroExodus999 3 місяці тому +1

    Good bro

  • @amazingrespect7089
    @amazingrespect7089 3 місяці тому +1

    Video on Basic to Advanced Animations. 🙏🙏🙏

    • @Rajpatel_1103
      @Rajpatel_1103 3 місяці тому

      I uploaded soon advance animation by gsap in my channel subscribe

  • @relaxingbuddygaming8867
    @relaxingbuddygaming8867 3 місяці тому +1

    Now I have responsive power

  • @alirezanasirzade2443
    @alirezanasirzade2443 3 місяці тому +1

    i have a question is there a way to write HTML code in modules like breaking it down into multiple HTML files and the add them to the main HTML file ???
    with out react I mean
    thanks for your great videos

  • @sinandoganli
    @sinandoganli Місяць тому

    challange is different heights for components ;)

  • @DavidPulke
    @DavidPulke Місяць тому

    you can use "columns" and thats it
    but good Video :)

  • @vosyasabesquien
    @vosyasabesquien 10 днів тому

    1:19 but can we get centering of the two cards of the last row with css grid?

  • @MohamedHussain-b4j
    @MohamedHussain-b4j 3 місяці тому +2

    😍😍

  • @iannmenezes
    @iannmenezes 3 місяці тому

    man, I love you XD

  • @DavidM_
    @DavidM_ Місяць тому

    What would be your solution to center the wrapped element? When we have for example 3 columns and one element wraps it is placed to the left column but i would like it to be centered. This is the reason i prefer flexbox here because there is no need of using additional css if the wrapped element should be centered.

  • @JACKoPL
    @JACKoPL 3 місяці тому

    And how to make such empty placeholders to fill the rest of the box to the end of the row? We don't always know when we are dealing with dynamic data (php). I guess we need to calculate the maximum number of columns and add additional boxes (max-1). And depending on the number of columns show or hide the appropriate number of added boxes.

  • @AlThePal78
    @AlThePal78 Місяць тому

    man you made it make sense to me LOL

  • @blented
    @blented Місяць тому

    amazing

  • @UwU-dx5hu
    @UwU-dx5hu 3 місяці тому

    Wow😮

  • @GastonSure
    @GastonSure 2 місяці тому

    Hi coding2Go, how can you achieve the layout,(you have section that contains image, few headings and some paragraphs to each heading.) at certain screen size image must be the other side while heading and paragraph also other side.? Using grid css.

  • @leonardoplus1671
    @leonardoplus1671 3 місяці тому +1

    I love you

    • @kx_exmum
      @kx_exmum 2 місяці тому +1

      i love you too 😘

  • @gaworytprwmWk
    @gaworytprwmWk 3 місяці тому +1

    Make me Show Sales online with html css 🙏😣

  • @KaOPYGO
    @KaOPYGO 3 місяці тому +1

    ❤❤

  • @Ninja_bit
    @Ninja_bit 2 місяці тому

    I always use auto-fill .
    what is the difference between auto-fit and auto-fill

  • @XDKOZ
    @XDKOZ 3 місяці тому

    Mmm I already watched that tutorial that you explained grid but there idk what you really explained like boxses adjustments ets

  • @AS-mc2db
    @AS-mc2db 3 місяці тому

    Dear sir please make e commerce website fully response.... please ❤

  • @fauzulkabir9300
    @fauzulkabir9300 3 місяці тому

    is it possible that i made 12 colum but i wnat that image come on 7 colum so if there is be responsive for mobile , in short that 12 colum but image cover 7 colum i there no space then it come on next line

  • @sbonelomtshali7909
    @sbonelomtshali7909 3 місяці тому

    ❤love it

  • @codemeanslove
    @codemeanslove 3 місяці тому

  • @atul-xt
    @atul-xt 3 місяці тому

    ❤❤

  • @reanwithkimleng
    @reanwithkimleng 3 місяці тому

    Second comment thank ❤❤

  • @Comet-1111
    @Comet-1111 3 місяці тому

    Hi, when this series would be published? Thanks

  • @Gaurav.esc09
    @Gaurav.esc09 3 місяці тому

    3rd comment 😅

  • @System3200
    @System3200 3 місяці тому

    damn, i'm not even a beginner and im still learning from your videos

  • @bethelcollins-okocha8314
    @bethelcollins-okocha8314 3 місяці тому

    Brother , Please Put some more courses on Your Udemy 🙏🏼
    Im about to get your 7-day HTML and CSS course on Udemy. But I discovered you only have 2 courses there.
    I absolutely love the way you teach.
    Please add Some Bootstrap , Tailwind , JavaScript , React , And other Backend courses too to your Udemy.🙏🏼

    • @coding2go
      @coding2go  3 місяці тому +1

      We will do that soon. We are currently working on a JavaScript course. And we will also be adding more practical projects to the CSS course soon.

    • @fauzulkabir9300
      @fauzulkabir9300 3 місяці тому

      can you share me notes or video if you dont mind

    • @ggamos9831
      @ggamos9831 25 днів тому

      @@coding2go I would love to pay for a complete CSS Grid course.. to build a full website. I'm halfway through my site, but running into consistency issues. I'd love to not have to use media queries if possible. I hope you produce this course, Thanks!

  • @stonebubbleprivat
    @stonebubbleprivat 3 місяці тому +1

    Don't use pixels as a unit while teaching or your students will copy that outdated behaviour

    • @abictor3312
      @abictor3312 2 місяці тому +1

      What is the ideal unit to use?

    • @stonebubbleprivat
      @stonebubbleprivat 2 місяці тому +1

      @@abictor3312 rem (root em). It depends on the font size of the root element (html/body). This means that if you change the font size in your browser settings your design scales with it. Em is relative. It uses the font-size of the element you are styling. E. g. Your heading with a big font size has a larger margin than a paragraph.
      You can think of rem just like pixels. 1 rem = 16 px which is the default font size in most browsers.

  • @Pareshbpatel
    @Pareshbpatel Місяць тому

    Responsive CSS Grid Columns with Wrapping, so well explained. Thanks.
    {2024-10-21}

  • @abhi.thakur008
    @abhi.thakur008 3 місяці тому +1

    ❤❤