Creating a nice layout CSS Grid layout using grid template areas

Continuing my dive into the CSS Grid, this week I take a look at grid template areas, and how they make laying out a design SUPER intuitive.

I first set up my layout using grid-template-rows, grid-template-columns, and then finally grid-template-areas. Following that up with a simple card with another grid inside the layout, I then take a look at how we can combine all three of those properties into the single grid-template property. Honestly, grid template is a bit of magic and it makes me happy.

Hopefully once you're done with this video, as well as my previous one where I looked at naming our grid lines, you'll have a good understanding on how to use CSS Grid, and start to realize it's awesome potential. This is a real game changer in how we can approach layouts on the web guys!

And if you've made it this far into reading the description, let me know with a comment saying 'the grid rocks my socks' to let me know!

And one last note, if you're wondering how to make all of this responsive (or more responsive), @media is your answer. You can completely change a layout either by changing the grid-template-areas, or just keeping everything the same, but redefining your columns and rows.

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[ramadanraji]

i was going to pay 89$ for grid critters to learn CSS grid but i remembered you exist and you create awesome tutorials. I am glad i watched your video. Thank you so much

[icreatestuff]

Kevin, I just wanted to send a heartfelt thank you for taking the time to create this tutorial. It all finally makes sense! I appreciate your giving back to us techies in such a big way!

[ElyKahn]

At last, the css-grid concept finally “clicked” for me, after no less than a dozen talks, tutorials and screwing around with codepens I was only able to appreciate the potential for the grid but it wasn’t forming the conceptual mental model needed to put it to use. This was spot-on being specific enough to get right to the point while taking the time to connect each property to the template area props and the declaration formatted longhand then short made it crystal clear. This is my first time watching one of your tutorials but I am onboard now for sure. Thanks.

[noirsociety]

this is truly an amazing and thorough demo tutorial on CSS GRID. Thank you Kevin for sharing your front-end knowledge and experiences with us.

[DavidNitzscheBell]

Whenever I watch your videos about building this or that with CSS-Grid, I'm so impressed how quickly you can go from no styles to a decent, nicely laid-out page. Boggles my mind. But, I still struggle doing the same. Not sure why I can't do the same.

But, thanks so much for your help and expertise..

[stephenlu]

I started coding html in the days of Netscape 2.0 browser. I didn't follow up in web development, and so all of this is brand new to me learning about flexbox and grid. But what just hit me, and please don't flame me for this, is why we used tables to do layouts way back when, because it's also a 2-D, grid system with rows and columns. You can also place tables within tables to create finer spaces. I know Grid is much more flexible and is separate from the content, but just have to wonder in the development of this Grid system, if it didn't start out, or talked about with the concept of tables.

But anyway, thank you, Kevin. I'm learning a lot from you.

[Alessandro-nqtm]

Best channel of web development on yt. Thank you Kevin for your hard work! :)

[rodrigogerman]

Kevin! I'm a new subscriber and wanted to thank you for all this css videos. Now I can see so much more clear! I hope getting my first job soon.

[apporvaarya]

best tutorial on css grid. u teach so good kevin. :)

[TheFallinforyou]

CSS grids makes layouts so simple. I love how you can set a template that helps you visualize how everything will look on the screen. When you finish with CSS Grids, could you maybe do a series on front end javascript? Love the videos, best teacher out there for front end!

[rawdelicious]

Man, you rock. You’ve made my life so much easier during the past 6 mths, why was I fighting it for so lomg?

[jakubivancik]

I would like to thank you very much Kevin for your effort and time. I watched two of your videos describing grid and I started already using in on client's website. I am so fortunate that I found your channel. Keep up, your are doing great job man! I wish you all the best in your life.

[kingbismmo]

Kevin you really help me to understend grid, You just wrote 2 línes and grid finally make sense to me, thanks you're videos are the Best.

[EnderRis]

Thanks for the videos. I enjoy your channel and especially the fact that I can watch your videos at 2x speed and still understand.

[tangodango]

Can't believe this was published over a year ago. Great content!

[codeitraw]

U saved my life. Now it’s easier visually to see how I’m laying things out!

[alebarbaja]

Man, you have something, your videos and your learning by doing is very educational. Thanks!

[chudpunter]

I've put off learning Grid for a while. It definitely has a learning curve, and a lot of the resources I found on it, while thorough in enumerating its properties, were a bit too dense, and pretty useless for getting someone new to it up and running quickly. And I really like flexbox, and have gotten pretty good at it, and have found it (mostly) sufficient for my projects. But this is the by far the clearest explanation I've seen of grid so far. And *wow* does it look powerful now that I understand its basics. I guess I'm obligated to use it for my next project now.

[andrenonso]

You just made minimax look so simple. Thanks blood

[creamintheblues]

Top job Mr Powell. Raising the bar every week! Thank you.