When I first learned about CSS Grid Layout and the new powers it gave us as CSS developers, I was immediately excited. I was thrilled at the prospe...
For further actions, you may consider blocking this person and/or reporting abuse
Hi, this is great tutorial. Can you make navbar like dev.to?
Sure, you can add an element at the top like
<nav id="navbar">, then add anavbargrid area and assign the element to that area. But as far as positioning content within the navbar, I actually think Flexbox might be the better choice for layout system, since it's a one-dimensional layout that needs to be flexibleYou can show me tutorial? The dev.to is awesome navbar.
Great article about an excellent addition to CSS! I would add that this doesn't replace the functionality provided by flexbox as that is still a better solution in some cases. A dynamic length list of cards is one example that comes to mind.
Oh, definitely, Flexbox has plenty of advantages on many circumstances. I didn't mean for this article to be a proper intro to Grid, so I didn't bother with the usual "when to use it" discussion.
Actually though, regarding your example with cards, depending on what the cards look like I might still use Grid in order to keep the elements of the cards inline with each other, keep them the same height and all that. I'm actually currently working on a post about just that topic right now, and how
display: contentsand the upcoming subgrid addition factor into that kind of a layout.Can't wait!
ICYMI, I published it yesterday! dev.to/kenbellows/why-we-need-css-...
OMG Ken, this CSS grid thing is awesome and so intuitive! Thanks for explaining it so well!
I also read this post by Rachel Andrew: You do not need a CSS Grid based Grid System.
Not writing rows and columns wrappers in the markup is liberating (especially because I might be able to stop littering the markup with those helpers only needed by the framework). It definitely helps accessibility too, as you mentioned.
I spent most of 2018 using Bulma (based on Flexbox) but this is much better.
It is finally time to start leaving CSS frameworks behind, or just use them for the components and not for layout :D
Vanilla CSS, vanilla JS, JAMstack websites... the web is getting simpler again ;-)
Yeah, definitely! I always hated digging through the layers of bootstrap containers to find the actual content; I'm thrilled to be able to write clean markup finally!
Another thing to look into with laying out components in a grid while maintaining semantics is
display: contents, which I hope to write another article about soon.I haven't tried named areas yet. Thanks for the enthusiasm. I feel hyped to try it
Any time! Post a link if you do something fun with it