Become A Master Grid CSS In 13 Minutes

In this video, I will teach you everything about grids in CSS so you can become a master when using it,
from basic usage to advanced usage to optimize it for use in all cases, especially in the responsive design process.
Steps - By Steps:
00:00 Introduce Grid CSS
00:57 Grid Container
02:47 Grid Items
04:33 Basic Usage
04:45 Advanced Usage
09:58 Responsive
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#javascript #code #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: [e-mail]
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages ​​such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.

[@lundeveloper]

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

[@codesaroka]

hi can you help me

[@timothyharrison5105]

Details on Flex
(Just to be sure that there are no hidden majic that were not covered in the previous videos)

[@aluexpress987]

Best css teacher i have ever seen in CZcams.

[@lundeveloper]

Thank you so much bro 🥹

[@zalkadridani]

agree

[@orc_song]

Man....thank u soo much you sharpen my grid knowledge.

[@vishalkumarchoudhary8497]

Mr.Beast Grid Known very well nd great tutor too!!

[@abcdabcd8605]

Awesome explanation mate!

[@abcdabcd8605]

5:11 amazing explanation!!

[@FABRIGS015]

no cap you're the best css teacher ever

[@mazinshakeel9553]

Great Tutorial👍🏻

[@lx9364]

Thank you Mr.Beast this tutorial was very comprehensive

[@PLATO-en5kp]

Thank you ❤🎉🎉

[@Migueltorrejas-el7jd]

Thank you sir!.

[@AS-rg9ly]

Awesome video! Auto-fill is a definite game-changer

[@lundeveloper]

That's right, thank you 😊

[@PicSta]

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.

[@ssygon2]

🤯grid-template-areas more visual, than having to calculate each item! Awesome!

[@lundeveloper]

Thank you bro ^^

[@tknassim4497]

Thank youuuuuu
My teacher

[@clarkcatle6720]

Dang bro, your vid is much more understandable than my college prof, keep up❤

[@erikvanzanen]

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.

[@lundeveloper]

I created a video instructing people when to use grid and when to use flexbox, you can check it out.

[@juanantonionavarrojimenez2966]

Great video. Thank you very much.

[@lundeveloper]

😍😍😍

[@alexcostal3749]

That's one of the best grid tutorial ☺️

[@lundeveloper]

Wow, thank you so much 😍😍

[@irfansaeedkhan7242]

why this channel was hidden from me till now, I am so happy that I am finally among chosen ones

[@ryosynys5745]

very important for me, thanks dude

[@lundeveloper]

😍😍

[@abcdabcd8605]

Definitely make videos on CSS positions(relative, absolute)

[@lundeveloper]

Yes i will

[@MSyRRe]

THANKS A LOT, THANKS!!!

[@lundeveloper]

Really glad it's useful

[@Programming-Fun-With-Hima]

You're just extraordinary ❤🎉🎉❤❤

[@lundeveloper]

😍😍

[@amirmumtazsiregar6394]

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

[@donydeltadtad7311]

i like every each content it is very knowledgeable

[@lundeveloper]

Thank you so much bro 😍

[@-Barny]

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

[@maicon484]

Like very good

[@jcjiron]

Amigo, gracias, eres una chulada jaja!

[@lundeveloper]

Thank you so much ^^

[@ZivKoHai]

hands down this is the best explanation ive seen and your voice is so similar to mr beast

[@endlacer]

lol

[@CodewithJDi]

Thanks Lun bro😍😋😁

[@lundeveloper]

😁😁😁

[@renrenklein_th]

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 ^_^

[@lundeveloper]

😍😍

[@maicon484]

Top😉

[@MegaRameswar]

Awesome bro can you also create the same for flex box

[@SlamPeaceful]

@lundeveloper I'm over the moon when I see your videos, please continue, great job 🎉

[@lundeveloper]

Thank you so much 😍😍😍😍

[@SlamPeaceful]

@@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

[@mantejsingh5438]

Awesome

[@alimansimov1929]

Perfect

[@lundeveloper]

Thank you 😍

[@siddharth7994]

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

[@lundeveloper]

Hi, I created a CSS tutorial playlist, you can check it out

[@AnandhuAjiGopinath]

God⚡

[@ranesourav]

Great video
How do you have the dotted lines, the blue shade and section numbers highlighted on the divs ?

[@zeeshanriaz-xg4cl]

Like that 👍

[@yashsagar734]

thank you sir

[@lundeveloper]

😍

[@abcdabcd8605]

Make video on CSS overlay

[@endlacer]

very good, but maybe reduce the usage of these sound effects.. :)

[@R0D_aris]

Please create videos on Java script too 🥺🥺

[@CodeRickRolled]

Can you overlap in the grid-template-areas?

[@sammytran2433]

amazing chanel

[@lundeveloper]

Thank you 😍

[@Fnydo]

It's Awsome

[@lundeveloper]

Thank you so much 🎉

[@sanketchaudhary3723]

Yo cool video, hows your console showing those measurements?

[@lundeveloper]

This is a devtool, it is available on most browsers

[@pronoy_sarkar043]

How to add a video on banner background & responsive it ??? Please make a video on this topic

[@-devjay]

awesome vid

[@lundeveloper]

Thank you 😍

[@codesaroka]

its good bro

[@lundeveloper]

Thank you bro ^^

[@saikrishna-or5qj]

how to get colored ou tabs in vs code. What extension you are using?

[@timothyharrison5105]

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?

[@timothyharrison5105]

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!!

[@lundeveloper]

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

[@quanglongtran03]

love you 😘😘

[@lundeveloper]

Love you too 😍😍😍

[@abo1428]

And now the same with flex-box 🙂

[@_Fancy_Bear_]

That thumbnail picture is Ready player one movie game created author anime game picture ❤

[@tasinmalif_]

which ai do you use to generate those voices?

[@maicon484]

LIKE👏👋

[@terrylin9748]

is there any extensions on VSC to show those borders for the elements on the local live server. my biggest struggle right now is actually visualizing the boxes iinn myy head so I just put a border on every container and it gets tedious sometimes

[@Pevvo]

You don't need any extension, you can turn this thing on in the Chrome dev tools (in the DOM view, right next to the element that's a grid container there's a "grid" badge that you can click to visualize the borders). The same goes for flexbox.

[@5MRx]

Please name extension above index.html color!?

[@Mahmud.R.Farhan]

please explain the Ajax Javascript.

[@lundeveloper]

Yes i will 😍❤️

[@christianjack1250]

First, you have to edit vs code to make that preview window to show css grid?

[@lundeveloper]

No, this is a built-in feature of Chrome and Microsoft Edge browsers, after declaring display: grid.
You just need to click F12 to open devtool, then click on the grid button located right next to the container class

[@christianjack1250]

@@lundeveloper great. I try now

[@taufiqdev]

4:54 grid ruh-ow? definitely ai voice

[@Un_Defeatable]

Bro what is this extension is it Sythwave '84' or something else!?

[@msd7rishi514]

Please make a video on transform and translate. 😥😥😥😥😥😥

[@lundeveloper]

OK bro 😍

[@msd7rishi514]

@@lundeveloper 🥰thank you very much sir

[@adiru9252]

Is this MrBeast?

[@paraggemini]

why does your voice sound so Mr Beast ?

[@codesaroka]

bro

[@codesaroka]

hhhhhhhhhhh

[@S04B3L]

is this ai voice? it sounds weird

[@Pevvo]

Yeah, that artificial voice is annoying.

[@BlazingTyphlosion]

Look at his channel. He is from vietnam. Selfexplained.

[@ryfesyt1001]

Q

[@GoodGameShishou]

Bad tutorial! 😖

[@briannguyen2464]

hay quá a ơi

[@lundeveloper]

Cảm ơn sư thầy Brian Nguyen 🙏 😅

[@codesaroka]

where are you live

[@lundeveloper]

I live in VietNam 🇻🇳

[@codesaroka]

@@lundeveloper ar you tell me lie >?????????????????????????????????????????????????

[@codesaroka]

Viet Nam's shift from a centrally planned to a market economy has transformed the country from one of the poorest in the world into a lower middle-income country. Viet Nam now is one of the most dynamic emerging countries in the East Asia region.

[@codesaroka]

you live her