How do you make a multi-column layout?

A simple design, where one column is a different width than the other yet pulling in content from the same sources, yet sometimes with complex development problems.

I’ve come across jQuery plugins such as Columnizer but I don’t think its the best solution, and ideally I’d like to use something MODX native.

I’ve tried a few ideas using the &offset parameter on two getResources calls; for example, the left-hand column with an offset of zero and the right-hand column with an offset of three - but then the pagination doesn’t always work as expected.

Does anyone have any good ideas for creating a multi-column layout?

Hi,
An interesting question. When I need multiple columns, I’ve just used TV’s and several DIV’s styled to the right sizes and shapes. I’ve also used Ditto calls, and I think GetResources could do the same thing.

Come to think of it, I think you could template GetResources in such a way that it would produce multi-columns even with one chunk of data(?).

But as soon as you said pagination, I said, "oh oh"!

Let’s see what people say.
Cheers

I came up with quite a nice solution today, although I’m not sure if its the simplest method of achieving this:





The article.template.first template is for the left-hand column, and the tpl_4, tpl_5 and tpl_6 article.template.second are for the three articles in the second column - where in the article.template.second template I’ve only included the introduction text and the article.template.first template has the introduction followed by the subheading and main content.

Then I used the new toSeparatePlaceholders parameter to split up the two columns, allowing me to have three articles in a column of width grid_6, then a narrower second column of grid_3.

And I also added the pagination to the bottom of the second, narrower column.


The nice thing about this is as more content is added to the website the older articles get pushed to the second column, giving them less focus than the newer articles.

You can also play with CSS3

Or play with the CSS3 column-property

http://www.css3.info/preview/multi-column-layout/

Quote from: Adam at Mar 29, 2011, 04:09 AM

I’ve come across jQuery plugins such as Columnizer but I don’t think its the best solution, and ideally I’d like to use something MODX native.

I don’t think that MODX should provide its native CSS grid system.
You can just pick one of them from outside there.
And MODX templating system makes you easy to use it.
I have tried 960.gs, Fluid 960 Grid System, and YUI 2: Grids CSS.

Indeed, MODx organizes, generates and presents your content. It’s up to you how you want it structured and styled.

That is actually one of the greatest strengths of MODx. No restrictions or pre-conceived notions of how your page will actually look. Consider the CSS Zen Garden site. All of the pages use exactly the same HTML structure, but each one has its own unique CSS and images. MODx is like that. We could all use the same template, but everybody would have it styled completely differently.

Susan, the CSS Zen Garden is one of my favourite projects - we should do something like that to show the power of MODX; the MODX Zen Garden just sayin’!

Anyway, yeah, I was thinking of using CSS3 first, then some kind of browser capability detection to fall back onto the getPage multi-column idea - but I wasn’t sure if this would really be faster.

Also, using the CSS3 columns I couldn’t figure out a way to make the articles wrap at the titles, so the left-hand column has exactly three articles and the right-hand column also has exactly three.

The only downside I can see to the server-side MODX solution is that when you start using the pagination the deeper pages use the same template; it would be best if the articles went into two equal columns, so the larger left-hand column on the homepage has more prominence out of all the articles; the rest become secondary.