I never realized that the parent was not the grid - until now! I thought that when we declared display: grid on an element, the element itself in essence 'became' a grid. I think I've heard that said before: "When you declare display grid, it becomes a grid parent", so I was confused why something like justify-content: start didn't shrink the whole element to the left. Very helpful as always Kevin! Minor note: You could consider mentioning that you added a little default padding on the child elements, just so it's super clear why the numbers don't fully slam to the top, left, right, etc, within each cell. I'm sure 95% of viewers will realize you've added some padding to these elements, but perhaps it could confuse people new to CSS.
I've been watching your channel for a while now and I found this video to be one of your best. It was well organized and scaffolded to demonstrate different scenarios of how Grid behaves and distinguish between the different alignment options. For myself it was good to learn about the stretch keyword as I hadn't come across that, as well as the assignment option buttons right in devtools.
What you said about thinking of the parent and the grid as being different really helped this click for me. Thanks!
I never realized that the parent was not the grid - until now! I thought that when we declared display: grid on an element, the element itself in essence 'became' a grid. I think I've heard that said before: "When you declare display grid, it becomes a grid parent", so I was confused why something like justify-content: start didn't shrink the whole element to the left.
Very helpful as always Kevin!
Minor note: You could consider mentioning that you added a little default padding on the child elements, just so it's super clear why the numbers don't fully slam to the top, left, right, etc, within each cell. I'm sure 95% of viewers will realize you've added some padding to these elements, but perhaps it could confuse people new to CSS.
I've been watching your channel for a while now and I found this video to be one of your best. It was well organized and scaffolded to demonstrate different scenarios of how Grid behaves and distinguish between the different alignment options. For myself it was good to learn about the stretch keyword as I hadn't come across that, as well as the assignment option buttons right in devtools.
Thank you for multiple clarification
Great explanation!
Explained very nicely!
Great reminder, thx Kevin ;)
Very nice 👍
Still eager for Anchor Positioning to go mainstream!
Make one about nested and sub nested grids
I'd like to see subgrid paired with this. I think that would be helpful as well.
🎉
Can someone please give me the link of the flexbox video?
I thought I was the only one who could never memorise which alignment is vertical, which is horizontal
Align-content is poorly named. I think "align-grid" / "justify-grid" would be 10x more intuitive.
Align-content and justify-content properties are not unique to grid elements. They are used in both Flexbox and Grid Layout
align-flid would be nice
align-grex could work too