Skip to main content

Forums

This topic contains 4 replies, has 0 voices, and was last updated by  Ilya 5 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43890

    Ilya
    Member

    I’m working on a 3 column layout for my page, something similar to pinterest.

    Here is the demo: http://codepen.io/IlyaDaderko/pen/ewCqu

    The issue is that at the moment columns display in the following order:

    1 3 5

    2 4 6

    Where as I would like them to display like this:

    1 2 3

    4 5 6

    Is that achievable? Maybe I can use something else instead of columns? (However I would not like to use things like big jQuery libraries for this, small js fix is appreciated tho)

    #130676

    Paulie_D
    Moderator

    Not much you can do about that if you are determined to use column-count because that’s te way it’s supposed to work.

    It’s not really necessary though.

    You can create a column layout using floats or inline-block or table-like styling.

    http://codepen.io/Paulie-D/pen/kCdKf

    #130677

    Ilya
    Member

    I tried using floats, but the issue is that height of each element varies, and it just messes up with floats, however column usage seems to have fixed that issue, but created another… Might have to look into some jQuery libraries for this ;/

    #130678

    Paulie_D
    Moderator

    Masonry.js might be your solution.

    #130679

    croydon86
    Participant

    Few options…

    1. Use floats with fixed height/min-height, although not ideal with dynamic data

    2. Use inline-block – New line will be on a straight horizontal line, no issue like you get with floats, however not sure if you prefer them to be on a straight line, or like how you have here.

    With one of these options, you can then use values like left:200px and left: -200px to reshuffle the layout.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star