is there a way to get my grid to behave in this order?

[lucibat]

Basically like this?

And lets say my coding was along these lines. Is there a simply solution I could do without altering the html, and wrapping the first two blocks in a div? I’d like to keep them unwrapped.

[Paulie_D]

Probably simple enough using nth-child and making use of grid-placement.

What have you tried?

[Paulie_D]

https://codepen.io/Paulie-D/pen/axmJwX?editors=0100

[lucibat]

Wow, thanks so much. It works like a charm! I’ve tried plenty of arrangements, but as a noob, I couldn’t figure out the right one, especially not being familiar with grids. I’d have provided a pen, but wouldn’t even know where to start with this. I was all over the place. Even the grid makers I’d stumble across would have some sort of wrapping going on.

Is there a way to apply a masonry uffect to it by any chance?
https://codepen.io/soppysopbat/pen/LvRzEG?editors=1100

[Paulie_D]

No…masonry isn’t possible as such with any CSS Layout method unless the heights of each element are multiple.

https://stackoverflow.com/questions/44377343/css-only-masonry-layout

[lucibat]

What do you mean by multiple?
Also how about a little js? Would it be too complicated?

[Paulie_D]

Read the link…it’s all there

[Author]

Posts