Basics of CSS Grid: The Big Picture

Posts created 3637

100 thoughts on “Basics of CSS Grid: The Big Picture

  1. "Let go of those ideas, purge that from your mind"… Jen's Zen of the Grid. Just an incredible overview of grid concepts! Love this series.

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

  3. 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?

  4. 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?

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

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

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

  8. You have such a great way of explaining exactly what you need and why you need it. Outstanding!!! –Pixie

  9. 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. 🙂

  10. 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?

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

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

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

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

  15. well I feel like I could write documentation on this…not really but I definitely understand it now. Thanks

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

  17. 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?

  18. Awesome explanation …. Jen have you used CoffeeCups new Site Designer V3 ?? If so is it possible for you to do some tutorials with it ???

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

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

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

  22. Thank you! I admittedly know nothing about grid and I thought “what better place to get an intro”? 🤓

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

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

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

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

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

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

  29. I was struggling to understand these concepts and you in 15:00 minutes just cleared it all. Thanks, Jen, you're amazing!

  30. Programming tutorials on youtube would be so much more enjoyable if Jen was doing them. Just so informative without making you feel intimidated. Bravo.

  31. Big thanks! I like your way of explaining "How to do" and talking clear language. Super easy to understand each word. Well deserved SUB!

  32. I needed one tiny bit of information that was not covered anywhere else. I got it from this video. Thank you!

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

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

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

  36. I'm quite amazed by the fact that she knows korean can be written vertically. Kids from nowadays even don't know that.

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top