Menu icon Foundation
Layout like {column-count: 4}

small-block-grid-x works for me in most cases, but in certain cases, instead of that layout:

item1 item2 item3 item4
item5 item6 item7 item8

I want a layout that stacks items by column rather than row, like this:

item1 item3 item5 item7
item2 item4 item6 item8

Anyone know how to do this in Foundation 5?

small-block-grid-x works for me in most cases, but in certain cases, instead of that layout:

item1 item2 item3 item4
item5 item6 item7 item8

I want a layout that stacks items by column rather than row, like this:

item1 item3 item5 item7
item2 item4 item6 item8

Anyone know how to do this in Foundation 5?

Rafi Benkual over 4 years ago

What do you want this to do on mobile?

Here's one way to do it: http://codepen.io/rafibomb/pen/Kppbda

I would only do this if you aren't adding more items.

Robert Crooks over 4 years ago

thanks, Rafi. On mobile, I want this to collapse to a single column. Thanks for the Codepen, but not exactly what I'm looking for. This is for a variable number of items determined at runtime (the actual use case I'm dealing with is creating an index of pages -- so I'm generating blocks like this:

A
link
link

B
link
link
link

C
link

D....

and so forth -- what I'd like is for the alpha sequence to be displayed vertically rather than horizontally, but split as evenly as possible across 4 columns on large and above displays

Rafi Benkual over 4 years ago

You can keep adding nested columns in each main columns or nest a block-grid in there:

http://codepen.io/rafibomb/pen/doowzL

Robert Crooks over 4 years ago

Thanks, Rafi -- that gets me closer. But I don't know how many lists I'll have in advance -- I only display the letter if there are items for it -- and I don't know how many items each list will have. I'd like to balanced the columns as much as possible.
Anyway, I'll work with this and see how it goes.

Rafi Benkual over 4 years ago

I don't know if what you are trying to to do has more to do with the grid, or how you'll use AJAX to add in content. The block-grid is made for arbitrary amount of content, It will continue wrapping to to the next line as content is added.

You cad do many cool things with the gris, like next a block grid inside another: http://codepen.io/rafibomb/pen/aOOMqw

But in your case then, I would use a block-grid for your columns and add in div's as needed.

Robert Crooks over 4 years ago

The content is pulled from a JSON file at runtime and varies depending on the part of the site (it's an alphabetical index of pages in that section). I did start with a grid, but got but I still get the blocks added left to right by rows, rather than columns. The result isn't very satisfactory on two counts: 1) people are used to seeing alphabetical list flow vertically rather than horizontally, and 2) for the blocks that happen to occupy the same row, three may have 2-3 items, and the fourth 13, which creates a lot white space and means a lot of vertical scrolling to blocks further down the alphabet. I was hoping to create something more like the second example in http://www.vanseodesign.com/css/multi-columns/

I tried just doing this by not using the Foundation grid at all and just creating my own style rules, but Foundation's CSS seems to override all column properties.