61–70 of 120 posts
Same with their grid guide.
In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to anyone who wasn't involved in the long proceedings that led up to the spec being written. You try to remember which one is justify-content, which one is align-items, and so forth, and just give up and try everything until something seems to work.
There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway Just my $.02
wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
Earlier quoted context omitted.
There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway Just my $.02
1fr wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
Earlier quoted context omitted.
Either Google has shifted _so much_ focus to getting an LLM to tell you about very real Encanto 2 spoilers that its search capabilities have atrophied, or my surprise at there not already being a Tailwind plugin for this is justified: const plugin = require('tailwindcss/plugin') const aliasFlexboxAlignment = plugin(function({ addUtilities }) { addUtilities({ '.cross-axis-baseline': { 'align-items': 'baseline' }, '.cr…
Tailwind sure is a blight upon frontend maintainability.
I also like Tailwind because it’s so self-documenting. Even if Tailwind’s development were to stop, tomorrow, and all of the style sheets were lost globally, I would know what everything is meant to be.
I know others have already mentioned it, but i've recommended https://flexboxfroggy.com/ to others before and they quickly picked it up. This is another good one for learning css grid https://cssgridgarden.com/
A useful tool for generating Bootstrap code is https://build.layoutit.com/ and for CSS grid https://grid.layoutit.com/. Unfortunately the former is limited to Bootstrap 4, not 5.
In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to anyone who wasn't involved in the long proceedings that led up to the spec being written. You try to remember which one is justify-content, which one is align-items, and so forth, and just give up and try everything until something seems to work.
There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway Just my $.02
Earlier quoted context omitted.
1fr wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
Fraction. As in 1/n.
Earlier quoted context omitted.
Fraction. As in 1/n.
right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"
In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to anyone who wasn't involved in the long proceedings that led up to the spec being written. You try to remember which one is justify-content, which one is align-items, and so forth, and just give up and try everything until something seems to work.
This is particular important on an SPA where I want the boxes to fill the screen but never overflow it. I manage eventually. I need to put the totally intuitive (sarcasm) min-width: 0, here and there, and a few other things here and there and eventually I get it.
I feel like I should be able to make a few css classes to cover all of this but I have yet to figure it out for every case.
Earlier quoted context omitted.
Fraction. As in 1/n.
right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"
If you want the second column to stretch, then the `fr` part is assigned to the second column. Mixing `fr` and `auto` doesn't really make sense. You can do it like this. https://codepen.io/tomtheisen/pen/emOeqPy
grid-template-columns: 10em 1fr;