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