Apps not correctly align on apps page

[schiessle]

I really like the latest changes to the apps page, the raster looks much better than the list. But it seems that sometimes the apps are not correctly align, see this screenshot:

I would expect that the "Versions" app is in the second column, under the text editor and not between the second and the third column.

cc @nextcloud/designers

[eppfel]

Yeah, I was thinking about this might be an issue, but when I created it, it had borders and then it was more clear:
Flexbox distributes it not in columns, but uses the space more flexible. I can look again, but I think there was no "take same size for all elements option". We could revert this and try with floats...

[jancborchardt]

@eppfel try table layout ;D

[schiessle]

Yes, I already assumed that it might be not that easy. But maybe someone finds a creative way to create a "clean table layout" with some css magic. Maybe we could fill up the rows with invisible dummy elements?

[te-online]

If I remember correctly the only way to enhance that is defining widths for the elements.

So for example you would need a width of 33.3333% for each element for a 3-column layout and then change the number of columns depending on the breakpoint. But that's a lot of manual work.

You could also set flex-grow to 0. This would make for a perfect grid, but the elements wouldn't fill up the full page width at some window sizes.

Another method is using a hack like this one: http://stackoverflow.com/questions/16377972/how-to-align-left-last-row-line-in-multiple-line-flexbox/31478004#31478004 (I don't like it...)

I wouldn't use floats (or tables :D) over flexbox in general, though.

[rullzer]

https://github.com/nextcloud/server/blob/master/settings/css/settings.css#L444 <-- shouldn't this to flex: 0 0 330px; do the trick?

[te-online]

Yeah, that's what I mean with flex-grow: 0; 😉
But then it looks like in the screenshot. So it's not using all the available space all the time.

[eppfel]

Thx, @jancborchardt, @rullzer, @te-online Correct me if I'm wrong, but flex-grow: 0 makes using flexbox completely obsolete, because we would have a fixed width and nothing "flexible". That's what I meant with reverting to floats.

The hack needs empty divs, really ugly.

Another option would be to use a responsive grid, so media-queries and percentages, because right now for most screens it would be 1-4 columns.

So, in the end it comes down to what we want.... Again, if you look into the original PR #1355 with borders it gets more clear.

[te-online]

@eppfel Essentially you're right with your summary 😉

Personally, I like the purecss grid, which makes use of flexbox. http://purecss.io/grids/
Maybe we can build our own small grid-css? http://purecss.io/start/#build-your-pure-starter-kit

However, maybe that's also an overcomplicated idea...
I don't really know at the moment 😳