Do all the things like ++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatarSign Up
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple APILearn More
hitko176342dMargin: auto; basically means "add as much margin as you have room for". So if parent is larger than the child and you add as much margin as you can to the left side of a child, it ends up being pushed to the right.
Wisecrack475742dThank you to both of you. I was under the misunderstand impression that auto tried to *minimize* area usage, instead of *maximize*, derp.
So its a very flexible layout choice.
Leads to a second question - I heard it said by others that flexbox is winning out over css grid as the preferred method of layout. Why?
hitko176342d@Wisecrack Because there's really limited use for CSS grid. In fact, the only common use for grid is when you want to precisely align cells across multiple rows and columns in a responsive way, or when you need to make a table, but you want to pretend you're doing something modern.
It's way more common to have a bunch of items where all you really care is that they fill the whole width, have uniform width, and wrap as needed.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Now tell me, which one is easier to understand an remember?
kiki1710342dI FEEL that you need flex-grow: 2