Build a Classic Layout FAST in CSS Grid

[@rogerpence]

I really like this presenter's style. This is a great, well-focused little lesson.

[@danf1862]

A fantastic tutorial Miriam! For anyone following along in 2020, grid-gap was deprecated in Dec 2019. The following replacements are recommended: grid-gap is now: gap grid-row-gap is now: row-gap grid-column-gap is now: column-gap

[@HazimSami]

Starting at 6:40, that is just pure magic 🤯 Wonderful, clear and beginner-friendly. Thank you, Miriam!

[@SebastianZartner]

Yeah, grid areas are extremely powerful. And you can even define overlapping areas by naming the different lines using square bracket syntax, see developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines for that.

[@markanthonyponce9484]

One of the best CSS Grid explanation. Thank you very much!

[@christinahorton9369]

I am very impressed with how well the information is delivered.

[@canersahin]

I have been avoiding Grids for a long time. Watching this video made me realize that was a mistake. Looks like Grid is the way to go for complex layouts.

[@goodluck2522]

This is more helpful than a 4 month college course.

[@berlino5563]

🤣

[@pjn2001]

Aint that the truth

[@terabit.]

You are uneducated ! Go get a life and go to a university ! Knowledge always comes with a cost ! Learning sht here and there is not a good methodology !

[@aloh86]

I always forget how to use CSS grid because I don't do alot of web dev. When I need to come back to it, I always watch this video. So well explained. Thank you Miriam.

[@okeimuokwugwo]

Love the simplicity employed in expounding grid layout. Well done.

[@Rollout123]

Nicely done. Simple, concise, not overwhelming...thanks!

[@piggiesgosqueal8066]

I have discovered the power of grids thanks to this video. This will likely save me a massive amount of time. Thank you!

[@falldowngoboone]

Thank you for these videos, Miriam. You are a fantastic presenter. Very natural delivery and extremely informative. I am so sad that I missed your talk at SmashingConf last week. I left half way into the day because I was feeling not well. Hope to catch you live soon!

[@MiriamCodes]

Thanks for the kind words - if you do catch me live, come say hi!

[@falldowngoboone]

Miriam Suzanne will do!

[@shandesilva8485]

Very neat grid tutorial, I learned grid almost year but didn't know how simplicity this power grid is, this video within 8 mins taught me. Thank you very much indeed.

[@TraceMeek]

Wonderful, clear explanation and examples. Thank you! Having spent nearly 20 year of my career hacking away at layouts by using floats (and clearing those floats), it's hard to believe that layout can now be done with such economy of code. So happy that Grid is here!

[@krtecek-who-tries]

Thank you Miriam, for the informative videos as well as for being an inspiration! 💜

[@madefromjames]

Love the samples and the awesome simplicity

[@ajdrag]

Bravo Miriam. Wonderfully simple. I'm re-designing an older site for my company. Migrating from, ready for this....FRAMES! CSS-grid will fill the bill nicely. Thank you.

[@RonWaller]

Grid is pretty awesome. Love the "simplicity" of making a layout compared to the way we use to do it.

[@samuelketels919]

Great tutorial, very clear from beginning to end and you can apply it straight away in your own code

[@flwi]

Great tutorial! Love the simplicity of it!

[@thomassteindl9481]

why does this video not have 1+ Mio views? It's perfectly explained and really well done!

[@joegreen6209]

Very nice. I like her style. This is a useful CS Grid piece.

[@joml2466]

I’m new to grid and it’s beautiful!

[@Zamicol]

Solid introduction. You're a great teacher. Thank you for posting this video!

[@curtdp]

It was fun, Thank you! Grids are awesome!

[@ELEV808]

Perfect tutorial. MDN is an amazing place to learn.

[@leminhphuc10t1]

This video is superb! Coming from flexbox layout I have to say grid layout makes it so much easier to change and maintain website layout!

[@giulia6930]

thanks, I was looking for a clear explanation, I'll start with your exercises 🙂

[@maximilianosalibe1710]

Pretty clear and useful! Regards from Argentina.

[@ricardoe.galvez5024]

This is great intro and explainer. Well done!

[@Atomos_tech]

Awesome content like usual, keep it up

[@DerekGomez-n1w]

This was awesome, thank you so much!

[@bunhamlad]

Thanks, you have an excellent presentation style. The video has given me confidence to start practising with Grid. I found the link to your codepen in the video description but maybe you could mention them in your presentation. Maybe in a future short video you could compare CSS verus Bootstrap. Good Job !

[@RickBeacham]

Interesting workflow. I like it.

[@TroyBennetts]

Thanks for the excellent explanation! There is a confusing editing error. I use this for my web design students and was wondering if a fixed edit might be reposted? It looks like the segment that runs from 7:06 to 8:03 should have been placed at 6:06. The video jumps suddenly from grid-template-columns to named areas. Thanks for the great content!

[@jasonbreen3632]

Noticed the same thing! In addition to the order issues, I think there is actually a missing segment where Miriam creates the named areas. Absolutely agree this is great content!

[@garyb3946]

Thank u kindly Sir from India ❤️🇮🇳🇮🇳🇮🇳

[@AlanLavender]

Beautifully explained.

[@FirdavsiGameDev]

Nice tools and tuts. Thank you!

[@jeffreybollman6186]

Thank you Miriam

[@terabit.]

He is a GUY !

[@jorgesantos8828]

Thanks for the video and for the subtitles

[@Luykev]

SHE IS AMAZING, thanks!

[@terabit.]

HE IS A GUY ! (Trans gender )

[@victornorman3671]

You have an amazingly comfortable voice to listen to.

[@anwarmunna3241]

how to position fixed of the header and nav section in grid? pls help

[@wukaipeng]

Very nice lesson

[@ofekezra7567]

How do I know how many columns or rows to use in a grid when I see a webpage ? Is there any best practice or tool ? How plan a layout grid ?

[@RadioCachivache]

Thanks!!!! thats wil change the way i make my custom themes for wordpress.

[@ProcureEminence]

Great video! Thanks for sharing.

[@HA-qm7kh]

thank you for the great lesson.

[@Nico-dy5rg]

this was really helpful, thanks so much!

[@amarcanth]

Fantastic!!

[@kottuzik]

Great lesson! Thank you very much.

[@atobfact234]

Hello

[@veronicaj6361]

Great explanation. I abandoned grid for flexbox because my self-teaching did not do a good enough job :( But I think I'll try it again!

[@jesusesquer2000]

Thanks Awesome Tutorial!

[@viniciocoelho3538]

Awesome, thanks.

[@jseurjU62]

He's a great teacher

[@terabit.]

🤣 Thank God someone put the right pronoun "He" !

[@xslicer5779]

Gr8 tutorial,i have quick question,i`m at the start with the usage of flex/grid and i was wonder if there is any way to color the grips between "boxes" just like you did in the tutorial,that would help me a lot to visualize the elements better,thx in advance.

[@Bj33333]

Miriam shows in the video how to enable the grid visualization in Firefox dev tools. That'll shade the gutters. I'm not sure how she made them red though. Maybe set a background colour on the grid, and then set it back to white on the children.

[@MiriamCodes]

Bart's guess is right: I used a red background color on the entire page, and then a while background on the layout regions (banner, nav, main, footer) - but the Grid Inspector dev tool in Firefox allows you to turn grid-line, area, and gap visualizations while you work.

[@guillermozx]

So happy to join mozilla devs newsletter and find this videos!

[@ikbo]

This is amazing but I would recommend updating it to showcase how grid works with container queries to create layouts

[@rodrigoibarra2054]

This is awesome!!!

[@amalmm4165]

you are the best .

[@terabit.]

He is a GUY !

[@zoachim]

How can 100 vh only be that high? Isn't it 100% of the vieport height - "at least as high as the viewport"? 2:48

[@smittalashilkar9330]

That's actually right behaviour cause it's set on body..

[@jeyosman1]

how the innitail skeleton is made

[@zabouti]

This is fascinating with lots of tips, but I would really have liked to see the HTML just once, probably at the beginning.

[@d9esperado]

For those of us playing along at home, it would be helpful to also show your initial HTML page. Otherwise, very informative.

[@goodluck2522]

It's directly linked in the codepen in the description

[@zalebprinton313]

Mega I like you, you do that great, thanks a lot

[@PaulMcCannWebBuilder]

Not to make this more complicated then it was meant to be, but grid-gap: instead of gap: ?

[@01rkingd]

Miriam, you're appreciated girl.

[@thunderstruck1078]

What?

[@terabit.]

HE IS A GUY !

[@mina86]

Can I use claims it’s supported by 95% of browsers. Looks like it’s time to start using it!

[@Palak2050]

You have very beautiful eyes and wonderful way of explaining things, Miriam.

[@xBalaDeCanhaox]

This is awesome.

[@TheZMasterful]

Thank you for uploading this :)) will Layout Land channel be updated? or will the grid videos be uploaded here?

[@thunderstruck1078]

Dear Lord!

[@noOwings]

omg

[@TerriTerriHotSauce]

Please make a responsive mobile-first version of this. (2 grids and 1 media query).

[@trasparent]

As the first video I see on CSS Grid I have to say it's explained really badly. She doesn't explain the basics, she uses properties that should even be introduced. The video is used to show what is done with Grid, then there is time to understand... I didn't like it.