Over the weekend, I watched "CSS Grid" - the newly released video course by Wes Bos. If you've been following my blog, you know that I'm a huge fan of Wes Bos and the consistently high-quality content he creates. "CSS Grid" is no different. In this course, Wes covers many of the CSS Grid features using easy-to-understand, iterative lessons that make the more confusing aspects of the grid specification concrete and consumable. If you're looking to learn more about CSS grid, I highly recommend this course as a stop on your educational journey. And, as an added bonus, the course is totally free, with thanks to Mozilla Firefox for sponsoring Wes Bos' time.
Part of what makes Wes' video courses so good is that he has a great ability to break a topic down into its fundamentals. And then, to build the curriculum up on top of those fundamentals, adding just the right amount of new information in each lesson. The resultant syllabus creates a gentle climb from total naivety to competence.
Along the way, Wes identifies aspects of CSS grid that are particularly confusing - such as the names of track or the difference between auto-fill vs. auto-fit - and does mini deep-dives that focus in on just that feature. This zoom-in / zoom-out cadence slows the pace the course down where needed; but, keeps the overall momentum of the course moving in the right direction.
And, as always, Wes includes a number of real-world exercises that take the theory of CSS Grid and applies it in ways that make the concepts much more concreate. One lesson that I found particularly interesting was his comparison of CSS Flexbox to CSS Grid. In that lesson, he went through a number of different layouts and demonstrated how each layout could be implemented with either of the technologies; or, why only one or the other technology could be used to achieve the desired outcome.
If I had one point of critical feedback, it would be that the CSS Grid course makes no mention of browser support or techniques for coping with cross-browser inconsistencies. For this topic, I've been using Rachel Andrew's article on CSS Grid Fallbacks. It seems like using Flexbox as the default and then promoting CSS Grid in a @support() query makes for the least amount of work. But, I'll have to get more practical experience under my belt before I can really attest to that.
To start honing my CSS Grid skills, I thought it would be fun try and pick up where one of Wes' lessons stopped. In his "grid-auto-flow" example, his use of "dense" left a few cells in the rendered grid empty. I wanted to see if I could find a way to fill-in those gaps to create a perfectly squared-off layout.
His grid was populated with items that had randomly-selected row and column spans (spanning anywhere from 1 to 4 tracks). So, in order to fill in the rest of the grid, I am also inserting a number of multi-row and multi-column items. The challenge is figuring out which item sizes can be used without increasing the overall bounding-box of the grid element.
At first, I was going to try and figure out how many cells in the grid were consumed; and then, try to fill in the remaining cells with randonly sized items. But, it doesn't seem like the HTMLElement interface exposes much grid-specific insight. At least, none that I could find. So, I decided to brute-force it. Rather than caring about how many cells were empty, I just started inserting randomly-sized elements to the end of the grid until the grid changed size. At that point, I knew that I added one-too-many; so, I removed the last-inserted element.
The resultant grid is fully packed, with gold elements being the ones that I added dynamically:
NOTE: Image is zoomed-out because it is rather large. Also, this algorithm seems to break when you are zoomed-out too far, which I assume is because the clientHeight value becomes funky?
As you can see, the grid has been completely filled. That was a fun experiment!
From reading The New CSS Layout by Rachel Andrew, it became clear to me that Flexbox and Grid are a critical part of the CSS specification to learn. Thankfully, we have video courses like "What The Flexbox" and "CSS Grid" to make learning these CSS features that much easier.
Want to use code from this post? Check out the license.
I'm also impressed! Another thing I love about Wes's courses is they ignite the imagination such that you want to expand on his examples. And he always leaves you plenty of room to expand on them. Yours is a great, very pragmatic extension. Thx!
I totally agree. I think that's the beauty of his use of "real world" examples. He's not just going over the syntax - he's showing you how you can start to apply it in ways that make life easier. I think this is what sparks the imagination - that you can really see how these new technologies can be applied.
This morning, I tried to sit down and play with a Flexbox implementation that was progressively-enhanced to use Grid if @supports() allowed it. It was trickier than I had anticipated (due to my lack of hands-on experience). But, at least I don't feel totally lost :D