7
Replies
Does this answer your question?
CSS Grid is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is a one-dimensional system (either in a column or a row). Another core difference between CSS Grid and Flexbox is that CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.
Since it's about that time to update my sites, what's the word on slash-closing tags in 2024? I'm more than happy to maintain the practice if there's even an ounce of benefit to it on any level 😃
By @Under S.
Self closing tag are mostly meaningless these days, you can safely forget them.
Added question : if backward compatibility and browser performance are concerns, do you recommend GRID or FLEXBOX in situations where both would work, and why?
Thanks!
By @Under S.
It's not a question of GRID 'OR' FLEXBOX - you should be using grid and flexbox together in the same layout to leverage their best qualities. Grid is highly efficient at creating complex main-structures which house your content, whereas Flexbox is highly efficient for laying out content within the main-structure itself.
Grid is much harder to learn whereas Flexbox is a lot simpler. Both can be used in combination with each other, which I think is the best workflow, or both can be used independently.
Grid is much harder to learn whereas Flexbox is a lot simpler.
I picked up Grid first, but will give Flexbox a bit more of my time since it seems to handle dynamic content better. Turns out the following code does pretty much everything I need it to do (ie, create a dynamic-width "row" box that will space out a dynamic amount of direct children evenly across the entirety of the width available).
.flex {
display: flex;
width: 100%;
gap: 1.5em;
flex-direction: row;
}<div class="flex">
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
I was stunned by how easy this was... at least, until I tried it with less text in the Content area. When there isn't enough of it to fill the width of the DIV, said DIV won't be as wide as it should be (which is to say 33% since there are 3 of them). Then I tried this :
.flex > div {
flex-grow: 1;
}
Which fixed everything. Whether there's enough text to fill each DIV or not, they all grow to 33% of the Flexbox.
Could you tell me if there's a way to tell the CONTAINER to make the children flex-grow, instead of targeting said children like I'm doing here? Thanks!
Added question : if backward compatibility and browser performance are concerns, do you recommend GRID or FLEXBOX in situations where both would work, and why?
Thanks!
By @Under S.
As quick as today's world is changing, backwards compatibility is meaningless. As your site has been running for quite awhile you should have analytics telling you who is using it to help guide your decision. But with that said, if your personal site lends to your career and is about being cutting edge, forget about backwards compatibility and showcase what you can do. You can suggest to your users to upgrade if they have not already.
AdChoices