rxswiftcommunity.github.io icon indicating copy to clipboard operation
rxswiftcommunity.github.io copied to clipboard

Flexboxification

Open ashfurrow opened this issue 7 years ago • 2 comments

Right now we use a kind of flowing grid to lay out all the cards on the site. That causes a problem when one card in a row is taller than the other cards in that row:

screen shot 2018-03-05 at 11 07 04 am

We should migrate our layout to use Flexbox, which presents an interface similar to UICollectionView for laying out items in a flow, line-breaking layout style. This will eliminate the gaps in between cards and their next rows.

ashfurrow avatar Mar 05 '18 16:03 ashfurrow

An alternate approach would be to use CSS grids to force the cells to all have the same height. Example here: https://twitter.com/kizmarh/status/994260528594907136

ashfurrow avatar May 10 '18 13:05 ashfurrow

The only issues with the CSS grids approach is it doesn't allow "aligning to each other" - there has to be an "original" piece that everyone conform to. In that sense that piece will have to be found based on the length of the string or something more involved, which might not be best.

freak4pc avatar May 10 '18 13:05 freak4pc