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
The most useful example of CSS grid being responsive that fills all the available space while wrapping content without the need to use media queries. Brilliant!
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!
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
@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!
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,
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
@@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.
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.
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
@@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!
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.
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
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.
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.
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
The problem comes when you only have one element in the grid, lets say I want to display user content if the user only have one element it grows to the whole screen
You seem to have a knack for creating content that helps people understand complicated css topics quickly, which is great! Well done. However, please don't stoop to dishonesty. This video is highly misleading. Kevin Powell has never said anything like 'don't use flex wrap' or anything like it. What he has repeatedly said is to learn both flex and grid, and then use whatever tool helps you get whatever effect you are looking for in the easiest way possible. He compares it to work shoes and cleats; you own both and then wear whatever is most suitable to your current use case. In this case, you are choosing a scenario where grid would be a strong fit, but then use sleight of hand to make it look like it fits all use cases. Making a site responsive doesn't mean that the cards should always stretch. Making a card fixed width and then justifying the title either right or left is a completely acceptable responsive design pattern, but can lead to all sorts of ugly displays with the approach you are outlining. I'd love to see you dropping the misleading of your audience but carrying on the great teaching work so that this channel can be one I subscribe to, support and share (as I do Kevin Powell's)
Just what I was looking for. Well explained without any blurb or annoying music. Great stuff! Thanks!
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
Thank you
@@paragshendkar7406 welcome💖💖
i really appreciate this
The most useful example of CSS grid being responsive that fills all the available space while wrapping content without the need to use media queries. Brilliant!
Knowing this fixes 80% of css problems, at least for me ;)
I can't wait for your CSS Grid series. I'm always bamboozled by grid and flex
The moment I heard "auto-fit" exists, I had already wondered if minmax would work.
Thank you for the information.
WOW, that autofit is so good. I didn't think of that, I always do the column count per media property. Thanks for this
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!
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
Its not often that I watch two videos and sub...incredible work mate!
Fabian, your css courses are the most useful I've ever found so far. Thank you a lot 🙏🙏🙏
Yeeeessss!! this is what I was waiting for 🎉🎉🎉
This video deserves a million of views
Yes, please grid, more grids 😊
@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!
Very straight forward, love it
Very useful! I've been looking for this for so long.
Ngl bro, you explain everything really well.
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,
Brother Such a long and complex topic you just Explain in 6 min. Amazing Man🎉. You got a new subscriber ❤
Really love your video. keep up the good work
The best web dev channel, everything is explained clearly👍
Thanks man❤
exactly what i was lookin for thankyou legend
bro your videos are super awesome, just love it
All magic based on the
:reapet(auto-fit, minmax(300px, 1fr)); ❤
fav channel
I always look forward to ur videos, it has really make me better as a developer 🎉
wow. you have explained very well . thanks a lot
Huge respect man 🎉
Hey your tutorials are amazing! You just have gained another fan lol
love the way you explain
Bro you are increasing my knowledge around CSS that my friends will take more 50 years to get there 😂😂😂
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
😂😂 well said
@@jeremygl1569since you said is a bad practice , I guess you should correct us here lol
@@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.
Sir you are my fav coder ❤❤
Thank you so much great explanation.
Thanks alot, for this amazing tutorial now time to put into practice
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.
awesome, thanks a lot for that!
Best Tut Ever
Awesome tutotial !
Excellent explanation! Thanks for share it
Glad it was helpful!
These videos help alot
Thank you sir ❤
Zabardast!🤩🤩
Thank you so much 🥰😇😇🥰
One "minmax" instruction and 20 rows of css code with @media in my project get out... Not bad... 🙂 Thanks
Very helpful 👌
FIRST COMMENT. THANK YOU FOR MAKING THIS!!
amazing thank you
amazing ❤❤
Thank you♥
Thank you
It's too good man
Very Helpful 😍
crazy video 🔥
Fab ❤
Thanks for your this video
Excellent sir, inshort ...
Perfect
thanks
Good bro
Bro got a master degree in css
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
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%?
1fr 2fr
5:36: grid-container
1:19 but can we get centering of the two cards of the last row with css grid?
amazing
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?
Yes, absolutely. I would recommend to use grid-template-areas for that.
@@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!
When will you launch the Javascript course?
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.
Wow😮
man, I love you XD
Video on Basic to Advanced Animations. 🙏🙏🙏
I uploaded soon advance animation by gsap in my channel subscribe
😍😍
Subscription button 🎉😂, thank you
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
Hi, how can we add images to each box of the grid?
Now I have responsive power
man you made it make sense to me LOL
you can use "columns" and thats it
but good Video :)
❤❤
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.
challange is different heights for components ;)
I love you
i love you too 😘
now... how can we combine this with sub grid? currently breaks for me when I try to use sub grid and this as well
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.
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
❤love it
I always use auto-fill .
what is the difference between auto-fit and auto-fill
Make me Show Sales online with html css 🙏😣
❤
Mmm I already watched that tutorial that you explained grid but there idk what you really explained like boxses adjustments ets
Dear sir please make e commerce website fully response.... please ❤
❤❤
The problem comes when you only have one element in the grid, lets say I want to display user content if the user only have one element it grows to the whole screen
I do exactly what you did yet my grid is not responsive...freaking frustrating.
Second comment thank ❤❤
damn, i'm not even a beginner and im still learning from your videos
3rd comment 😅
Hi, when this series would be published? Thanks
You seem to have a knack for creating content that helps people understand complicated css topics quickly, which is great! Well done. However, please don't stoop to dishonesty. This video is highly misleading. Kevin Powell has never said anything like 'don't use flex wrap' or anything like it. What he has repeatedly said is to learn both flex and grid, and then use whatever tool helps you get whatever effect you are looking for in the easiest way possible. He compares it to work shoes and cleats; you own both and then wear whatever is most suitable to your current use case.
In this case, you are choosing a scenario where grid would be a strong fit, but then use sleight of hand to make it look like it fits all use cases. Making a site responsive doesn't mean that the cards should always stretch. Making a card fixed width and then justifying the title either right or left is a completely acceptable responsive design pattern, but can lead to all sorts of ugly displays with the approach you are outlining.
I'd love to see you dropping the misleading of your audience but carrying on the great teaching work so that this channel can be one I subscribe to, support and share (as I do Kevin Powell's)