If you find it interesting, don't forget to subscribe to follow the latest videos. And please suggest me what topic you would like to see a video about
I highly recommend reviewing it the next day after learning. I noticed that this helped me catch misunderstandings and remember things I had completely forgotten.
I feel like congratulating myself for clicking on this video, because i almost ignore the video, but surprisingly this is the best grid video have ever watched, even know more gird properties than before. Thanks so much for this video.
To get the grid lines with numbers : Open Inspect window, in the bottom right corner you will find a Layout tab where you can select the Grid overlays checkbox
Couldn't we use methods like minmax, calc and clamp instead of media queries? Would love a deep dive on that cos you're very good at explaining things in ways that make sense right away 👏🏾
I prefer auto-fit instead of auto-fill to fit into its container size. Both values have their niche to be used, but in most cases the auto-fit value is the better choice. This can also be combined with a minmax() function for even more precise control.
i was here from the start like 9-10k subscribers. everytime i watched your video i thought this creator deserves all the subscribers because how good the content is. glad to see you are almost you now have 106k subs. congratulation bro.
"I've watched a few videos on the subject as a newbie programmer, and this is by far the best example I've seen for simplifying grid layout. One small tip: consider adding slightly longer pauses after demonstrating examples to give viewers more time to process the information. Thanks for the tutorial! Because of it, I've set up a killer-looking VS Code IDE and have a much better grasp of grid layout. Keep up the great work!"
Amazing video, I like the way of your teaching it's fast at the same time its easy to understand. before this video it was hard to me to understand grid, but now I started knowing grid Thanks to you.
You explained well, and nothing new that i learned (but im also studying Applied Computer Science at uni). That is why I noticed that youre working with pixels instead of rem or %. There are many noobs that watch your videos and they have no clue why working with pixels is VERY BAD practice. When you work with pixels, you should always disclaim that the use of pixels in 99,99% of cases is bad but you use it now for ease of use. If you said that in your video at the very start, this video would have been 100% educationally correct instead 90%. In any case, it was a nice to see how you use the grid-templ-area. I didnt use enough space between the dots which makes my grid messy. I will change that from now on.
@@danholm99 I dont need to do anything. Its not my job to educate people, otherwise I would have started my own channel or be a teacher in some form. I already helped noobs enough by stating that using pixels is very bad practice. The noob student should do their own research. Just like every programmer has done a billion times. You guys are not babies, and not everything should be given with the golden spoon in your mouth. There are enough resources to educate yourself, cuz hey.... thats what youre trying to do when looking up tutorials online, right....??! Good luck.
Just stumbling across your channel and loving the teaching method only thing I would change is I always try to use % when giving sizes so that the webpage is easily resizable if everything is just random px sizes it does make for some headaches in bigger projects. But other then that love the content ^_^
Great and simple explanation, love it! But: - what about "mobile" first? Its better to go with "min-width" instead "max-width" in media queries - I'm missing in-deepth expanations about "Special Units & Functions" like: min-content, max-content, fit-content, minmax, auto-fill, auto fit. - Also subgrid and masonry topics are quite interesting but complex --> maybe some input for your next video ;)
This makes me wonder to drop Flexbox o0 but I also feel that Grid is preferred more for like the examples of the chairs; when you have more then lets say 5 items or you want to define a specific designed layout.
from browser dev tools, go to html where grid is located, there you can see grid tag on right side of element, click on it and you got that grid highlighter
@@lundeveloper could I ask you for to explain the 3d design if you have a time, i think it's popular now, what do you think for that, thanks too much to listen my words
Hello Bro Your Videos on CSS are Excellent, I want yo ask that can you make the playlist on advanced CSS properties, I want to explore it more.. please
Can you make the adding cart with php and login account? Your explanation is awesome I just understand the grid and flex just with your video, hopefully can understand the adding cart with php too haha
Could you please explain how your output displays the layout of your code with borders and background colors as you write it? Is there any extension you use for that?
Dude your videos are really amazing and informative, but i just wanna suggest that the music used in the video is little unpleasant to me, they are unexpected and pretty loud and rough. Can you please try little sound variation in your video?
Please make Tutorial on Salesforce frontend development........................................................................pls if you are interested
When creating a grid system in which basically there are multiple boxes which overlap a single box large box, the small ones have a picture and some even have text, how would I make the smaller one remove its background and only have the pic in it and text, which then in shown over the box. box=square/rectangles.
Not sure about everyone else but I fins grid-tempate-areas syntax to be so strange. You're basically drawing the layout in text. Surely there could have been a more programatic style for this when the guys at the W3 came up with the spec?
Sorry I had questions, as a developer how can you test your site on every browser for example cause I don't have Ios I can't test my project on Safary and I see lots of problem on that
Lun, you just became my mentor! But I'm not sure I can have a proper conversation until I go through your entire videos and learn every thing there. Thanks for this great video!!
hi, to see it. First you need to declare the grid in your css. Then on the website, Click f12 to open devtools, on the elements tab, right next to the element you just declared display: grid, you will see a "grid" button. Click on it, you will see everything
It's in developer mode, you need to declare display: grid before turning on developer mode. You will then find the grid button right next to that element
If you find it interesting, don't forget to subscribe to follow the latest videos. And please suggest me what topic you would like to see a video about
hi can you help me
Details on Flex
(Just to be sure that there are no hidden majic that were not covered in the previous videos)
@@Reyanabid-M how can i help u bro
Do a video on vs code extensions u use
GREAT, FUN Explanation Loved It and Already Subscribed G 💯
I highly recommend reviewing it the next day after learning. I noticed that this helped me catch misunderstandings and remember things I had completely forgotten.
Best css teacher i have ever seen in UA-cam.
Thank you so much bro 🥹
agree
120% 4 sure
@@lundeveloper Thank you man
The dramatic music is so dramatic, and I love it.
Mr.Beast Grid Known very well nd great tutor too!!
never seen someone doing it better in such a simple way.
Found your channel just 2 days ago. Just cant get over it how much I have to learn and its all looking amazing and fun thanks to you.
I feel like congratulating myself for clicking on this video, because i almost ignore the video, but surprisingly this is the best grid video have ever watched, even know more gird properties than before.
Thanks so much for this video.
Cảm ơn LunDev nhé video dễ hiểu nhất từ trước đến giờ mình từng xem.
Thanks brother 😍
tbh! I've had issues with grid B4 this video, I auto subscribed..thanks a lot❤️❤️
To get the grid lines with numbers : Open Inspect window, in the bottom right corner you will find a Layout tab where you can select the Grid overlays checkbox
I've looked everywhere (besides where ever it is you're saying it is).. I can't find it.
@@Hillgrov maybe you are not worthy
Couldn't we use methods like minmax, calc and clamp instead of media queries? Would love a deep dive on that cos you're very good at explaining things in ways that make sense right away 👏🏾
🤯grid-template-areas more visual, than having to calculate each item! Awesome!
Thank you bro ^^
Best video on grid I have ever seen. You are the best teacher.🖤🖤
This video is so good that I started crying with joy. 😭❤
Thank you very much, you are the most interesting individual who teaches CSS this way, don't stop uploading, i enjoy your content.
the best explanation i have seen, thank you man!!
Awesome video! Auto-fill is a definite game-changer
That's right, thank you 😊
I prefer auto-fit instead of auto-fill to fit into its container size. Both values have their niche to be used, but in most cases the auto-fit value is the better choice. This can also be combined with a minmax() function for even more precise control.
I love your teaching skills and I think you are the best for css and front end designing❤❤❤
i was here from the start like 9-10k subscribers. everytime i watched your video i thought this creator deserves all the subscribers because how good the content is. glad to see you are almost you now have 106k subs. congratulation bro.
5:11 amazing explanation!!
"I've watched a few videos on the subject as a newbie programmer, and this is by far the best example I've seen for simplifying grid layout. One small tip: consider adding slightly longer pauses after demonstrating examples to give viewers more time to process the information. Thanks for the tutorial! Because of it, I've set up a killer-looking VS Code IDE and have a much better grasp of grid layout. Keep up the great work!"
no cap you're the best css teacher ever
concise and simple, love the sound effects..
I hate them
Amazing video, I like the way of your teaching it's fast at the same time its easy to understand. before this video it was hard to me to understand grid, but now I started knowing grid Thanks to you.
You explained well, and nothing new that i learned (but im also studying Applied Computer Science at uni). That is why I noticed that youre working with pixels instead of rem or %.
There are many noobs that watch your videos and they have no clue why working with pixels is VERY BAD practice. When you work with pixels, you should always disclaim that the use of pixels in 99,99% of cases is bad but you use it now for ease of use. If you said that in your video at the very start, this video would have been 100% educationally correct instead 90%.
In any case, it was a nice to see how you use the grid-templ-area. I didnt use enough space between the dots which makes my grid messy. I will change that from now on.
and you should explain why rem is a better choice (because of the noobs reading the comments)
@@danholm99 I dont need to do anything. Its not my job to educate people, otherwise I would have started my own channel or be a teacher in some form.
I already helped noobs enough by stating that using pixels is very bad practice. The noob student should do their own research. Just like every programmer has done a billion times. You guys are not babies, and not everything should be given with the golden spoon in your mouth. There are enough resources to educate yourself, cuz hey.... thats what youre trying to do when looking up tutorials online, right....??!
Good luck.
@@jeremygl1569 And good luck to you 😄
What an explanation bro. Too good 🔥🔥🔥
Man....thank u soo much you sharpen my grid knowledge.
I'm your fan, congratulations on your professionalism and for sharing your wealth of knowledge. I will watch all your videos!
Thank you so much 😍
Bro, I was reluctant to subscribe to your channel but with this video I can't take it anymore
The best way ever thank you
Thank you Mr.Beast this tutorial was very comprehensive
Just stumbling across your channel and loving the teaching method only thing I would change is I always try to use % when giving sizes so that the webpage is easily resizable if everything is just random px sizes it does make for some headaches in bigger projects.
But other then that love the content ^_^
😍😍
why this channel was hidden from me till now, I am so happy that I am finally among chosen ones
Sir kindly make one more video on Grid layout and please prefer a small grid Based project ❤
Definitely make videos on CSS positions(relative, absolute)
Yes i will
i understand grid ....finallyyyyyy
Great and simple explanation, love it!
But:
- what about "mobile" first? Its better to go with "min-width" instead "max-width" in media queries
- I'm missing in-deepth expanations about "Special Units & Functions" like: min-content, max-content, fit-content, minmax, auto-fill, auto fit.
- Also subgrid and masonry topics are quite interesting but complex
--> maybe some input for your next video ;)
This makes me wonder to drop Flexbox o0 but I also feel that Grid is preferred more for like the examples of the chairs; when you have more then lets say 5 items or you want to define a specific designed layout.
I created a video instructing people when to use grid and when to use flexbox, you can check it out.
hands down this is the best explanation ive seen and your voice is so similar to mr beast
lol
That's one of the best grid tutorial ☺️
Wow, thank you so much 😍😍
Classic Teacher
The red outline and the coordinates on the left, how did they get displayed? Is that a VSCode plugin for liveserver or something different?
Dang bro, your vid is much more understandable than my college prof, keep up❤
very important for me, thanks dude
😍😍
Great video
How do you have the dotted lines, the blue shade and section numbers highlighted on the divs ?
from browser dev tools, go to html where grid is located, there you can see grid tag on right side of element, click on it and you got that grid highlighter
@lundeveloper I'm over the moon when I see your videos, please continue, great job 🎉
Thank you so much 😍😍😍😍
@@lundeveloper could I ask you for to explain the 3d design if you have a time, i think it's popular now, what do you think for that, thanks too much to listen my words
Hello Bro Your Videos on CSS are Excellent, I want yo ask that can you make the playlist on advanced CSS properties,
I want to explore it more.. please
Hi, I created a CSS tutorial playlist, you can check it out
don’t mind the AI voice comments and keep up the good work, your videos are amazing! 😁
Thank you ❤🎉🎉
Can you make the adding cart with php and login account? Your explanation is awesome I just understand the grid and flex just with your video, hopefully can understand the adding cart with php too haha
perfectly explain 100%
THanks brother ❤❤
Can I tell you something? I love you ❤😂
Maybe for you, it's nothing but for a person like me who is just learning it's a lot. Thank you
Could you please explain how your output displays the layout of your code with borders and background colors as you write it? Is there any extension you use for that?
very good, but maybe reduce the usage of these sound effects.. :)
Great tutorial, but I think adding the use of the MIN, MAX and MINMAX functions for grid layouts would have been Chapter 6: Using it like a PRO
i like every each content it is very knowledgeable
Thank you so much bro 😍
Thank youuuuuu
My teacher
Very nice, loved this video
again and again great content
How was the live server showing in this css friendly manner?
Hey lun, I have one question, so what's the difference between auto and 1fr?
Awesome explanation mate!
Great Video! I am ditching flex.
Incredible 😲
Dude your videos are really amazing and informative, but i just wanna suggest that the music used in the video is little unpleasant to me, they are unexpected and pretty loud and rough. Can you please try little sound variation in your video?
Bro always make your videos with explanations
Please make Tutorial on Salesforce frontend development........................................................................pls if you are interested
You're just extraordinary ❤🎉🎉❤❤
😍😍
Great video. Thank you very much.
😍😍😍
Thank you sir!.
Nice...Most youtubers here use auto-fit instead of auto-fill....whats your take on this?
When creating a grid system in which basically there are multiple boxes which overlap a single box large box, the small ones have a picture and some even have text, how would I make the smaller one remove its background and only have the pic in it and text, which then in shown over the box. box=square/rectangles.
Nice work man
Can you overlap in the grid-template-areas?
I dont know others but best till now
Thanks bro 😍😍
Thanks Lun
Not sure about everyone else but I fins grid-tempate-areas syntax to be so strange. You're basically drawing the layout in text. Surely there could have been a more programatic style for this when the guys at the W3 came up with the spec?
Awesome bro can you also create the same for flex box
how the text in subjects (item1,item2,item3) become center in the css grid (vertical & horizontal) ?
thank you🙌🙌
Sounds like Kyojiro Rengoku 🥺
Amazing 🤩
amazing ✨✨
Amigo, gracias, eres una chulada jaja!
Thank you so much ^^
Great Tutorial👍🏻
THANKS A LOT, THANKS!!!
Really glad it's useful
How to add a video on banner background & responsive it ??? Please make a video on this topic
Would it be possible to create tetris using grid and css only?
Brother can u do a video on the extentions u use in vs code..please 🤔
OK brother
Sorry I had questions, as a developer how can you test your site on every browser for example cause I don't have Ios I can't test my project on Safary and I see lots of problem on that
Yo cool video, hows your console showing those measurements?
This is a devtool, it is available on most browsers
God⚡
Pufff! you are a beast bro! .... a beer for u.
Please create videos on Java script too 🥺🥺
Thanks Lun bro😍😋😁
😁😁😁
I have qestion please answare! How to view this grid blueprint?
I LIKED ❤💎 I SUBSCRIBED 👍
Wow. This guy is Awesome! This is really Master Level
Wait! How is he displaying those lines and pointers on the grid?
Lun, you just became my mentor! But I'm not sure I can have a proper conversation until I go through your entire videos and learn every thing there.
Thanks for this great video!!
hi, to see it.
First you need to declare the grid in your css.
Then on the website,
Click f12 to open devtools, on the elements tab, right next to the element you just declared display: grid, you will see a "grid" button. Click on it, you will see everything
how do you show the grid on the right side? been looking for something like this myself (can't find it in developer mode).
It's in developer mode, you need to declare display: grid before turning on developer mode.
You will then find the grid button right next to that element
thank you sir
😍
Like very good