every-layout icon indicating copy to clipboard operation
every-layout copied to clipboard

Stack: would you use grid over the margin technique described on the stack layout page?

Open NullVoxPopuli opened this issue 5 years ago • 0 comments

Grid seems to be a simpler solution than specifying margins on things.

To me, dealing with margins on the child elements (no matter which class adds them), is like each element "I want this much space, and this is my personal bubble" It gives 0 regard to the other people elements surrounding it.

With Grid, the child elements don't get a say. They are uniformly spaced, no matter how many rows/columns/etc -- all with less CSS.

However, a lot of grid tutorials I see on the web do way more than they should be doing -- messing with grid-areas. I don't know why they do this.
Most of the time all you need is;

display: grid;
grid-gap: 1rem;

for a vertical stack and

display: grid;
grid-gap: 1rem;
grid-auto-flow: column;

for a horizontal stack.

And then you can also get a consistent 2D grid as well (I mean, this is why Grid is called grid). when dealing with margins, I think sort of layout gets convoluted

NullVoxPopuli avatar Oct 30 '20 17:10 NullVoxPopuli