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

[Rugg]

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

[Paulie_D]

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

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

[Paulie_D]

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/

[Kitty Giraudel]

> 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.

[Paulie_D]

If they are images, does the order really matter?

I think js is the answer.

[Paulie_D]

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.

[cristianav]

@rugg

what did you use to create this type of grid?
thanks

[dauruk0512]

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

so the better idea using this plugin http://welcome.totheinter.net/columnizer-jquery-plugin/ hope this help you, nowdays newspaper style is mode on now.

Hope this help you :D

[cristianav]

Hi,

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!

[dauruk0512]

What did you asking ? can you describe in dummy images ?

Freddy

[cristianav]

I want something like http://tympanus.net/Development/GridLoadingEffects/index2.html
This is based on masonry jqeury plugin, but it is not working OK when you load images dynamically from the server. It is working well when you have a predefined list of images.

[Author]

Posts