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!
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,
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.
@@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!
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
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.
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.
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
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.
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 ;)
The moment I heard "auto-fit" exists, I had already wondered if minmax would work.
Thank you for the information.
I can't wait for your CSS Grid series. I'm always bamboozled by grid and flex
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!
This video deserves a million of views
Its not often that I watch two videos and sub...incredible work mate!
All magic based on the
:reapet(auto-fit, minmax(300px, 1fr)); ❤
Yes, please grid, more grids 😊
Very useful! I've been looking for this for so long.
Ngl bro, you explain everything really well.
Fabian, your css courses are the most useful I've ever found so far. Thank you a lot 🙏🙏🙏
Very straight forward, love it
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!
wow. you have explained very well . thanks a lot
Thanks alot, for this amazing tutorial now time to put into practice
bro your videos are super awesome, just love it
Sir you are my fav coder ❤❤
Thank you so much great explanation.
The best web dev channel, everything is explained clearly👍
Really love your video. keep up the good work
Thanks man❤
Yeeeessss!! this is what I was waiting for 🎉🎉🎉
Thank you so much 🥰😇😇🥰
One "minmax" instruction and 20 rows of css code with @media in my project get out... Not bad... 🙂 Thanks
These videos help alot
Thank you sir ❤
exactly what i was lookin for thankyou legend
love the way you explain
fav channel
Hey your tutorials are amazing! You just have gained another fan lol
Brother Such a long and complex topic you just Explain in 6 min. Amazing Man🎉. You got a new subscriber ❤
Huge respect man 🎉
I always look forward to ur videos, it has really make me better as a developer 🎉
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,
awesome, thanks a lot for that!
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.
Excellent explanation! Thanks for share it
Glad it was helpful!
Zabardast!🤩🤩
5:36: grid-container
Very helpful 👌
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.
Awesome tutotial !
Very Helpful 😍
Thanks for your this video
Thank you
Bro got a master degree in css
amazing ❤❤
thanks
FIRST COMMENT. THANK YOU FOR MAKING THIS!!
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%?
It's too good man
When will you launch the Javascript course?
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!
Subscription button 🎉😂, thank you
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
Fab ❤
Good bro
Video on Basic to Advanced Animations. 🙏🙏🙏
I uploaded soon advance animation by gsap in my channel subscribe
Now I have responsive power
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
challange is different heights for components ;)
you can use "columns" and thats it
but good Video :)
1:19 but can we get centering of the two cards of the last row with css grid?
😍😍
man, I love you XD
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.
man you made it make sense to me LOL
amazing
Wow😮
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.
I love you
i love you too 😘
Make me Show Sales online with html css 🙏😣
❤❤
I always use auto-fill .
what is the difference between auto-fit and auto-fill
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 ❤
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
❤
❤❤
Second comment thank ❤❤
Hi, when this series would be published? Thanks
3rd comment 😅
damn, i'm not even a beginner and im still learning from your videos
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}
❤❤