HomeArticlesBasics of CSS Grid: The Big Picture Basics of CSS Grid: The Big Picture By Juan Cameron November 20, 2019 Articles, Blog 100 Comments Tags:content sizing, css, CSS Grid, css grid layout, Developer Relations, developer tools, DevTools, Feature Queries, firefox, flexbox, flexibility, Fonts, graphic design, grid container, jen simmons, layout, minmax, minmax content sizing, Mozilla, Resilient CSS, Resilient web design, Responsive design, responsive web design, Responsive website, web design, web development Related Posts Creative Web Design Tips & Tricks | Bangla Tutorial Responsive Tables Intro – Responsive Web Design Fundamentals 2.3.1: HTML Introduction About Author admin 100 Comments Noble&Savage February 13, 2018 Jen please keep doing vids. I have just started learning web dev, and you are awesome <3 Reply Tom Ciolli February 13, 2018 These videos are unbelievably helpful. Reply NickMode February 13, 2018 Tnx for inspiration. Reply Tigershot February 13, 2018 I could watch these videos for days straight. Reply David Miller February 14, 2018 Off topic…I think it would be nice if we had a property called "size" that we could use when the width and height of an element will be equally defined. So, if width=50px and height =50px we could just type size = 50px. Maybe you can get that suggestion into the right ears. Reply Ryan CS February 14, 2018 What's the impact of using "display: contents" on the "only direct children are grid items" model? What would the performance implications / trade-offs be between using a nested grid that matches the parent vs up-jumping grandchildren to the children? Reply Rio Waller February 15, 2018 Great job!!! Thanks Jen!!! Reply Nils Borgböhmer February 18, 2018 Thank you Jen for this video series! It really is the best overview one can get on the new tech! Reply Christel Voss February 21, 2018 Best explanation ever! Reply David Hernandez February 22, 2018 Superb! This is what I've been missing from other tutorials. Great job! Reply Textras February 23, 2018 Fantastic Jen. As always! Reply L Fried March 1, 2018 Is there a place where I can download the grid container template/with proper column/row/item divisions and that I can use for when I create mockups in a program such as Figma/Adobe CC? Reply NagaHumanbeing ZooOfParticles March 2, 2018 b element has some use after all. Reply Amine Makhlouf March 3, 2018 There's something that bothers me a lot these days since I'm very new to web dev (I started learning in January, with no prior knowledge on the subject matter). And I found myself confronted to a lot of things going on, I mean I feel like I'm in a middle of a huge shift right know, sometimes I start thinking that it's maybe not the best time to do it, then after doing a lot of research I've discovered that It's never a good time to do it if I look at it from that perspective, since it's evolving in a pace where no one can find the perfect spot to start with…bottom line: Do It, and start now!! Everyone have felt or will feel the same way when starting to code for sure!!Now my question is: Experimented people always suggest that we need to know the basics, and it's something that I agree with, but when it comes to new things, do we need to go through the old stuff?, I mean do I really need to know about the float based layout techniques and frameworks Or I move on and work with a newest and easiest technique ? In other words, witch is better : learn CSS Grids without putting the old stuff in your mind? Or learn the old stuff (basics) and then "purge that out of your mind" and work with CSS Grids?ps: I love your vids they're very informative! THANK YOU! Reply Jeff Schwartz March 8, 2018 I was a little confused when you explained that only direct children of the container are placed on the grid and that children of those are not placed on the grid. I was interpreting "not placed on the grid" too literally. I now believe I understand what you said to mean that only direct child elements of the container can be items and have item-specific css attributes and their children will be placed on the grid but not as items but rather as the item's content. I tried making a grandchild element an item and the browser rendered the parent of the grandchild as an anonymous (implicit) item and its child (the element upon which I actually placed grid-row and grid-column attributes on) as the anonymous item's content. I think your videos and presentations are awesome. Watching them has reignited my love for web development after having walked away from it a few years back due to illness. Thankfully I am 100% well now and dying to get back into the game and in large part that is because of you. Thank you so much. Reply nivita March 11, 2018 Being able to style the empty grid cells would be awesome (I love visible grid lines) – hope Grid level 2 does give us this ability! Reply Greg Brown March 13, 2018 I love how articulate you are. No umming and ahhing. Nice, precise content. Thank you. Reply Pixie Ziegler March 29, 2018 You have such a great way of explaining exactly what you need and why you need it. Outstanding!!! –Pixie Reply Andrea Cordes April 4, 2018 Just found your videos today: It's awesome seeing a woman teaching web design/development (almost every place I've been to, the dev department is a bunch of dudes), and I'm learning SO MUCH. Thank you for explaining everything in detail. As a graphic designer trying to improve on my front-end development, it's wildly helpful. 🙂 Reply Dave Williams April 11, 2018 Thanks! Great info! Reply Defias Bandit April 25, 2018 Am new to grid, and in this video had a couple of "ahhhhhh!" moments. Very well explained, thanks! Reply Eleonora Ma May 10, 2018 amazing videos 😮 Reply TwoBuck Chuck May 21, 2018 Um, youre smart. Reply bo heem May 22, 2018 Can someone point me to where on the css draft spec there is the reference to 'only child elements' become placed on the grid but the great grandchildren cannot be placed on the grid? Reply For Phone May 28, 2018 That was really really nice, deep and useful video!! THANKS A LOT! Reply Kevin D May 30, 2018 Thank you so much for this explanation. I have been using flexbox and have been having a hard time getting layouts like I want them. Excited to get started with CSS Grid! Reply Samuel Baik May 31, 2018 Thank you for making the grid so easily digestible!!! Subbed! Reply EJT June 7, 2018 Your videos on CSS Grid are by far the most thorough and helpful that I've come across. Thanks for your efforts in making these videos!!! Reply Robert Foster June 16, 2018 I love all your videos. Very calming, relaxing & soothing while teaching. And the way you explain things makes me want to learn more. 🙂ALL your videos are the best explanation ive ever found on the internet. Thank you. Reply FAHID NASIR June 25, 2018 I like the way you explain.I get the vibe that few of the points were on the spot and I guess that's why you didn't include the slides for those. Reply George Bockari June 26, 2018 well I feel like I could write documentation on this…not really but I definitely understand it now. Thanks Reply Gelli Ravikumar June 27, 2018 Simple and crispy info. Thanks! Appreciated your efforts ☺️. Reply mike Ion July 1, 2018 Can you please detail or show example how we can make the last part you talked about happen? I am trying to do exactly that, have some sprt of color scheme or stripe run down or across or maybe even diagnol but can't seem to find a way using grid that will also be responsive. Plz plz plz Reply Vishal Singh July 2, 2018 I am using grid-column and calc width css properties in .less but the value get converted in decimal automatically. When I use them in .css then it works fine. We can't use these properties in .less files? Reply flectronics July 7, 2018 Awesome explanation …. Jen have you used CoffeeCups new Site Designer V3 ?? If so is it possible for you to do some tutorials with it ??? Reply Steven Seah July 12, 2018 Great videos! Please post more! Reply Mark Graham July 16, 2018 Do Microsoft attend the specification meetings? Reply Amy Gail July 21, 2018 Excellent teacher. Reply Tolis Christomanos July 23, 2018 What is wrong with the people that disliked this video? Reply iamDecim July 23, 2018 Ahhh explained well….i've just started to transition and i'm used to heavily nesting. This makes sense. Reply Tom Jardine-Smith July 23, 2018 I have a question re: grid layout. Say I have a grid set up to responsively manage the content of a whole page. At the top there'd be some sort of header I want to span the full width of the screen regardless of how many columns CSS Grid may or may not be generating (assuming I'm letting it auto-calculate rather than specifying specific numbers of columns). How would I go about instructing that first item – the header – and any other such items further down the page that I want them to span the full viewport no matter how many columns there are and for any given viewport width? – Tom Reply Alessandro Muraro July 28, 2018 Wow didn't know about these videos, thanks Jen! Reply Praxis Dev1 July 29, 2018 How could there be even one dislike? This is possibly the best overview I’ve ever seen… super clear and concise, and her delivery style is so cool. I’m now a fan. Reply Preston Toor July 29, 2018 As a full-time WordPress developer who uses Bootstrap 4 every day, I am thankful for your videos on CSS Grid. I've watched several videos on it, but it still wasn't making sense. Thank you for this video series! Reply Matt P July 31, 2018 Fun fact: you are allowed to define obscure area shapes, but it loses its mind. Reply RunOs August 1, 2018 This is the best explanation of a grid. Reply Corey Ethology August 1, 2018 Jen, you are a GEM. Thank You! Reply Kieran Barker August 3, 2018 Thank you! I admittedly know nothing about grid and I thought “what better place to get an intro”? 🤓 Reply David ben Mesecke August 7, 2018 Excellent presentation, very (sic) tutorialistic. Yes I know that's not a word, but it should be 🙂 Reply iG August 13, 2018 Thank you very much, a very complete and professional explanation, your English is very fluent and well pronounced for those of us who are learning this beautiful language. Reply Lucas Jacobs August 14, 2018 Jen, thank you for explaining it so well and for your awesome narrative style! I came here after watching the wonderful Rachel Andrew’s vids which made me start using the grid. But then you add so much necessary depth and reasoning! Reply Shamari Hankins August 17, 2018 Nice! Reply E M August 17, 2018 Fantastic! Reply Muhammad Qamar August 24, 2018 (y) Reply 김진홍 August 26, 2018 Thanks!! Reply 9em Design August 29, 2018 hello jen, i'd like to know if css grid and flexbox is supported on smart tv's Reply J J August 31, 2018 all that I can say is: respect maam! Reply Emily Wong September 16, 2018 My teacher says not to use div tags. Reply Margo Darden October 13, 2018 Hi, I am a newbie to coding and I wanted to know what is a b element and do you have an example of it but I loved the discussion on CSS Grids. I wanted to include that into my project using the CSS GRIDS. Reply Dimitri October 14, 2018 Very well explained. Thank you. Reply R C October 15, 2018 Im just getting my head around grid and the more time passes the more I enjoy this woman talking. Shes very good at explaining the subject. Reply charlyRoot October 21, 2018 I'm bad at search because I can't believe I've not run across your content yet. I can't recall such efficient use of words during an explanation. Until now, I never realized how many unnecessary words are jammed in the cracks between sought information in the other tutes I frequent. If your video is titled "css grid," 99% of your words are about css grid. Very refreshing for idiots like myself. Reply Mithun Dutta November 2, 2018 <kneels and bows and takes hat off> Reply Ian Carr November 10, 2018 Excellent thanks. Reply ShillBullshit007 November 29, 2018 Your videos are fucking awesome….pardon my french…..great job….so helpful!! More crumpets please!!! XD Reply Petro Success December 13, 2018 I had a question about one of your facts presented in this video.You cannot fill a track, but you can make skinny tracks to get that effect? (This is not my question)I was wondering if you could designate an area inside of a grid item (tile) full width by 4px tall and make it consistently transparent and not reactive to any other coding for the rest of the item (tile) to give the look of offset or uneven tiles in CSS grid? I have a photo to illustrate what i mean, but no way to share it. Lol Reply João Vitor December 15, 2018 I was struggling to understand these concepts and you in 15:00 minutes just cleared it all. Thanks, Jen, you're amazing! Reply Kr Dev December 19, 2018 I love the way you explained everything.CSS Grid sounds great. Does this mean that i can ignore learning Bootstrap now? Reply The Guitar Factory School January 4, 2019 Awesome – articulated so clearly – so eloquently – thank you 🙂 Reply Rolando G January 4, 2019 Excellent explanation, I wish I would have seen this at the start of my CSS grid adventure! Thank you. Reply Matt Mortensen January 10, 2019 Programming tutorials on youtube would be so much more enjoyable if Jen was doing them. Just so informative without making you feel intimidated. Bravo. Reply N W January 31, 2019 Big thanks! I like your way of explaining "How to do" and talking clear language. Super easy to understand each word. Well deserved SUB! Reply RunAsAdministrator February 15, 2019 You are the best teacher. I’ve watched many videos and you are the one I recommend to friends. Thank you! Reply Israel Teixeira February 22, 2019 This is when technical skills meet teaching skills. Reply Lucille Kenney March 6, 2019 Great explanation of the grid. It all makes perfect sense. Thank you! Reply Fabi Clubb March 9, 2019 I needed one tiny bit of information that was not covered anywhere else. I got it from this video. Thank you! Reply mike Ion March 14, 2019 Do you have an example of the <b> tag stripe on a track that can go across a page or go down an entire page? I have been looking for way to perfect this and perhaps a diagnol line etc.. Reply LimitedWard March 19, 2019 Why are line numbers not zero-indexed? Reply Robin Francis April 3, 2019 Without a doubt the best CSS grid explanation ever. Reply Tyler Patterson April 9, 2019 Good stuff Reply SergioU April 11, 2019 13:07 The grid is the "architectural layout". The elements of the interface are "furniture". Reply French in Plain Sight April 14, 2019 You clearly understand this in your core. No cuts, just wonderfully clear. Thanks! I'm coming to learn grid before really having much experience with flexbox so I want to learn both and make informed decisions on my future layouts. You've helped me a lot already. Reply Charls Catipay April 22, 2019 Its a good Idea to introduce first the terminologies before diving too deep about the subject. Reply Keith Balante May 2, 2019 This is great Reply FreeBird May 7, 2019 Thank you!!! So much! New to CSS after learning some HTML back in the late 90's. I've been so confused, and more confused the more I read. FINALLY it makes SENSE! I'm with ToughCandy. Mozilla give her a raise! Jen you are amazing. Reply David Echeverri May 20, 2019 Thank you for the explainer Reply Raccoon May 27, 2019 I'm quite amazed by the fact that she knows korean can be written vertically. Kids from nowadays even don't know that. Reply jwhubert91 May 30, 2019 This is the best explanation of the overall concept of Grid usage and how flexible it is. Reply Hasel32CH June 14, 2019 Anonymous elements… like a <span>? Thank you for this video – it's really great 🙂 Reply Tommy Lee Jones June 18, 2019 Great video and good explanation. One tip: raise the volume, have someone check the levels. Reply David Rice July 11, 2019 I dont know how your videos started showing up in my suggested section, but I am so thankful they did. You explain CSS Grid amazingly! Reply Matthew Breeden July 23, 2019 This is such good stuff. I love the way you combine a deep expertise with a learned practicality. Reply Bob Burch July 26, 2019 Great job! Reply Lic. Eugenio R. Rodríguez September 5, 2019 with all due respect, you do no not need subgrids, I am already nesting grids within grids succesfully using css grid, nested grids have a totally diferently layout and if you wish you can make this complex whole structure responsive too. THANKS for your video ! Reply MC Morales September 23, 2019 Very nice explanation, technical and simple to follow, thanks so much! Reply VaiGo October 18, 2019 One of the best channels. Please, come back with the videos Reply Richard Pratt October 22, 2019 Being self taught. Trying to figure out floats and displays was frustrating. You fix one thing and something else breaks.Grrrr! This grid stuff has opened a whole new world for me. I might even be able to make a career out of it one day!Thank you for your time and explanation. They need a two thumbs up for videos like this! Reply ruffneck718 October 22, 2019 Thank you SO Much Jen. Reply MajorTom1313 October 28, 2019 Damn, you are really easy to understand. 🙂 Reply phil anglade November 7, 2019 Too much speech, not enough code examples … Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.