trouble with the flow

[Alx-l]

Hi, first, I wanted to thank you guys for the great job on this awesome grid-system :)

Now, the facts. Let's look at this pen.

When I add a div above the <section>'s, it messes up the order on the rows, looks like it's going backwards, or as if I had activated some rtl stuff...

Of course, if a add another div in between, to create another context, it puts everything back in order. So, I just wanted to know if it was a bug, or is it working as expected?

Thx

[corysimmons]

#239

Lost is an "nth grid" (works with less markup than something like Bootstrap by making use of nth selectors). The problem with nth grids is you need to know how many elements are going to go into each row and can't mix/match them.

I'd suggest trying to pull the object out of the grid container: http://codepen.io/corysimmons/pen/XdrePV

Or using Lost's "masonry grid" settings.

[peterramsing]

Diddo with @corysimmons on this one. That div should probably be out of the context of the sections.

Let us know if you need anything else and thanks for taking the time to file and issue!

[Alx-l]

Thx for the quick answer. It makes sense (the fact that I can't mix/match everything like it was friday night), so, there's nothing wrong with your grid system, I just have to be careful when setting up my grids ;)

And so true about the less bloated markup @corysimmons, actually, that is one of the main reasons I got interested in that kind of tool in the first place (I was using Foundation, which is great in its own right of course, but kinda heavy and whatnot).

I've been able to build this layout pretty easily (and keep my markup clean) with Lost.

Anyway, keep up the good work guys :)

[corysimmons]

haha, cool layout. Really shows off a lot of stuff Lost can do. =)

[Alx-l]

Hi, I have another question for you @corysimmons, @peterramsing, please take a look at this pen.

At first glance, everything seems alright, but let's resize the window below 760px, and the layout breaks.
Is this the expected behavior?

I came up with a mixin (strongly inspired by Lost) and here is the result.
The items clear themselves at the beginning of each new cycle, so nobody messes with anybody's business :)

[corysimmons]

Try out lost-masonry stuff. By default Lost uses nth-child to create grids. It's less markup but not great for masonry stuff. I added in lost-masonry to support this kind of stuff though.

Re: clearing; we were doing that. I forget if/why it got taken out.

[Alx-l]

Yes, I've already looked at that masonry stuff, and it's pretty pretty cool, but I meant, with no JS :)

Too bad if you did have this clearing stuff but have left it out...

Anyway, thx again for your work 👍

[corysimmons]

Please at least browse the README's Table of Contents:

This isn't JavaScript. It's CSS built into Lost.

[Alx-l]

No, I know, I meant "masonry", not lost-masonry ;)

[corysimmons]

Too bad if you did have this clearing stuff but have left it out...

@peterramsing Did clearing get removed from Lost?