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
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!
@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!
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
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,
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.
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.
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
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
@@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!
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.
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.
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
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)
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 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!
@@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.
![KRK - ชนิสรา Ft.WanMai , N/A [Official MV] Prod. By Sakarin](http://i.ytimg.com/vi/C-WMwwYobcU/mqdefault.jpg)
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💖💖
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
This video deserves a million of views
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!
Its not often that I watch two videos and sub...incredible work mate!
Yes, please grid, more grids 😊
Very useful! I've been looking for this for so long.
@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
Fabian, your css courses are the most useful I've ever found so far. Thank you a lot 🙏🙏🙏
Thanks man❤
Ngl bro, you explain everything really well.
bro your videos are super awesome, just love it
fav channel
All magic based on the
:reapet(auto-fit, minmax(300px, 1fr)); ❤
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
Really love your video. keep up the good work
Zabardast!🤩🤩
Brother Such a long and complex topic you just Explain in 6 min. Amazing Man🎉. You got a new subscriber ❤
wow. you have explained very well . thanks a lot
Thanks alot, for this amazing tutorial now time to put into practice
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,
Sir you are my fav coder ❤❤
Huge respect man 🎉
Thank you so much 🥰😇😇🥰
I always look forward to ur videos, it has really make me better as a developer 🎉
These videos help alot
Thank you sir ❤
The best web dev channel, everything is explained clearly👍
exactly what i was lookin for thankyou legend
Excellent explanation! Thanks for share it
Glad it was helpful!
love the way you explain
Hey your tutorials are amazing! You just have gained another fan lol
Thank you so much great explanation.
Very helpful 👌
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.
Yeeeessss!! this is what I was waiting for 🎉🎉🎉
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.
One "minmax" instruction and 20 rows of css code with @media in my project get out... Not bad... 🙂 Thanks
Awesome tutotial !
awesome, thanks a lot for that!
Very Helpful 😍
FIRST COMMENT. THANK YOU FOR MAKING THIS!!
Thank you♥
It's too good man
amazing ❤❤
Thank you
Thanks for your this video
Excellent sir, inshort ...
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%?
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
thanks
Good bro
Bro got a master degree in css
Subscription button 🎉😂, thank you
When will you launch the Javascript course?
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
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!
Fab ❤
1:19 but can we get centering of the two cards of the last row with css grid?
5:36: grid-container
Now I have responsive power
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.
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.
😍😍
man, I love you XD
amazing
you can use "columns" and thats it
but good Video :)
Video on Basic to Advanced Animations. 🙏🙏🙏
I uploaded soon advance animation by gsap in my channel subscribe
man you made it make sense to me LOL
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.
challange is different heights for components ;)
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
Wow😮
I love you
i love you too 😘
❤❤
I always use auto-fill .
what is the difference between auto-fit and auto-fill
❤love it
Dear sir please make e commerce website fully response.... please ❤
Make me Show Sales online with html css 🙏😣
damn, i'm not even a beginner and im still learning from your videos
❤
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)
❤❤
Mmm I already watched that tutorial that you explained grid but there idk what you really explained like boxses adjustments ets
Hi, when this series would be published? Thanks
Second comment thank ❤❤
3rd comment 😅
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.🙏🏼
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.
can you share me notes or video if you dont mind
@@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!
Don't use pixels as a unit while teaching or your students will copy that outdated behaviour
What is the ideal unit to use?
@@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.
Responsive CSS Grid Columns with Wrapping, so well explained. Thanks.
{2024-10-21}
❤❤