Get a free trial // Grow your CSS skills // Land your dream job

CSS3 Columns: load Left to Right instead of Top to Bottom?

  • # June 3, 2013 at 11:31 am


    Curious if anyone knows a method for changing the direction that content loads in CSS3 Columns.

    By default the content is stacked vertically within each column and loads from **top to bottom**… as apposed to floated columns which load **left to right**.

    **Example (CSS3 Columns):**

    1 | 4 | 7

    2 | 5 | 8

    3 | 6 | 9

    **Example (floated):**

    1 | 2 | 3

    4 | 5 | 6

    7 | 8 | 9

    Is there a way to load the CSS3 column content left to right instead of top to bottom? is there a jQuery fix for this? Any suggestions are appreciated. Thanks

    # June 3, 2013 at 11:32 am

    I’m not entirely sure what you are after but…Flexbox?

    Frankly, it doesn’t sound as though you want columns at all.

    # June 3, 2013 at 11:45 am


    By default, all content that is structured using [CSS3 Multi Columns]( “CSS3 Multi Columns”) will load vertically from top to bottom until the current column is full…and then move horizontally to fill the next column…

    This loading behavior is different from block or floated elements which load left to right and down the page.

    I’m curious if there is a hack for changing the load direction of the CSS Columns from vertical to horizontal…

    The above diagram illustrates the order in which content loads

    # June 3, 2013 at 11:48 am

    Yes I know that but if you don’t want them to act like columns then why are you using that property?

    Offhand it sounds to me as if you are after a ‘flow’ property from one row to another and so on.

    # June 3, 2013 at 11:51 am


    to make a grid that packs images similar to pinterest. Here is an old demo posted on this site some time ago…

    # June 3, 2013 at 12:13 pm

    > By default, all content that is structured using CSS3 Multi Columns will load vertically from top to bottom until the current column is full…and then move horizontally to fill the next column…

    Yes, this is what “column” means. I’ll have to agree with Paulie: you don’t seem to need any column. Use float/inline-blocks.

    # June 3, 2013 at 12:27 pm


    Using float/inline-block certainly works…but not in this situation. The whole purpose for using the Column method is to create a grid that packs content with random heights… similar to the Masonry JS plugin or the Pinterest homepage. This type of grid cannot be achieved floating elements or displaying them inline-block… there will be gaps where the element heights don’t match.

    # June 3, 2013 at 12:30 pm

    If they are images, does the order really matter?

    I think js is the answer.

    # June 3, 2013 at 12:40 pm


    The layout of images doesn’t necessarily matter…but the load order does unfortunately. Let’s say the grid contains images far below the browser fold…this can be a problem considering the 2nd, 3rd, 4th columns won’t start loading content until the first column completes. So essentially you will see content loading in the viewport eventually loading below the fold…and then back into the viewport…you get the idea

    # June 3, 2013 at 1:02 pm

    Yeah but you keep talking in terms of columns which clearly aren’t appropriate here.

    Load order is the same (essentially) as source order. If you don’t use columns (see above) then that solves the loading issue.

    # June 3, 2013 at 1:02 pm

    You migh be looking for a script of that kind.

    # June 3, 2013 at 1:14 pm

    ok…Thanks for the help and suggestions everyone

    # June 29, 2015 at 7:01 am


    what did you use to create this type of grid?

    # June 29, 2015 at 6:36 pm

    I have been through in this issue, yes coloumn in css3 give users not good reading article.

    so the better idea using this plugin hope this help you, nowdays newspaper style is mode on now.

    Hope this help you :D

    # June 30, 2015 at 4:06 am


    Columnizer plugin is top to bottom solution. I am looking for a left to right solution, with variable heights, like masonry.

    I was just asking if someone found a better solution for it.

    Thank you!

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed