Grow your CSS skills. Land your dream job.

Re – Arrange default column order (css3 columns)

  • # April 4, 2013 at 1:53 pm

    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)

    # April 4, 2013 at 2:17 pm

    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

    # April 4, 2013 at 2:34 pm

    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 ;/

    # April 4, 2013 at 2:36 pm

    Masonry.js might be your solution.

    # April 4, 2013 at 3:09 pm

    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.

*May or may not contain any actual "CSS" or "Tricks".