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

    Hi,

    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

    @paulie_D

    By default, all content that is structured using [CSS3 Multi Columns](http://www.w3schools.com/css3/css3_multiple_columns.asp “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.

    http://html.adobe.com/webplatform/layout/regions/

    # June 3, 2013 at 11:51 am

    @paulie_d

    to make a grid that packs images similar to pinterest. Here is an old demo posted on this site some time ago… http://css-tricks.com/examples/SeamlessResponsivePhotoGrid/

    # 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

    @hugoGiraudel

    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

    @paulie_d

    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.
    http://masonry.desandro.com/demos/basic-single-column.html
    ?

    # June 3, 2013 at 1:14 pm

    ok…Thanks for the help and suggestions everyone

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

You must be logged in to reply to this topic.

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