Menu icon Foundation

My Posts


  • 6
    Replies
  • Layout like {column-count: 4}

    By Robert Crooks

    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 ... (continued)

    Last Reply by Robert Crooks about 4 years ago



My Comments

Robert Crooks commented on Robert Crooks's post over 3 years

cool, thanks

Robert Crooks commented on Robert Crooks's post about 4 years

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.

Robert Crooks commented on Robert Crooks's post about 4 years

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.

Robert Crooks commented on Robert Crooks's post about 4 years

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

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Robert Crooks's post over 3 years

cool, thanks

You commented on Robert Crooks's post about 4 years

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.

You commented on Robert Crooks's post about 4 years

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.

You commented on Robert Crooks's post about 4 years

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

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content