|
I enjoy seeing other people's solution, but since I really learned the power of grid, most of this is overdone with flex. As an example, here's how you can make a vstack with grid. vstack {
display:grid;
}
It's ridiculously simple and clean, works with all the elements without extra wrappers, no margins, no cleaning up trailing spaces, etc... add spacing class using "grid-gap" and it's the near perfect solution.The hstack example is more complicated, because you simply have to choose widths, there is no getting around this, even with flexbox. (unless you want to totally give up control of the layout to "auto".) The spacing classes are clever, and I may adopt some of this method. (I use grid gap, I only have 2 sizes) With the "Spacers" example, a width of 1fr works using grid. Flex beats grid with some natural overflow capabilities (row wrap), but other than that, flex is not great for this kind of thing. Since there's only a few examples, I suspect this person will be adding more in the future. Edit: For declarative things like this, I think there should be one assumption. I use vertical in web interfaces. This means one less option to remember. (ie, by default everything is vertical) Edit2: With an unknown number of items, flex is probably preferable for horizontal items for simple columns. But that is only if you don't care about the widths of the columns too much as well. |