As far as I can see, this is probably one of the nicest things to ever hit web design: It will allow for complete separation of content and layout, without the need for all the float/margin crazyness that currently makes CSS layouts such a pain. It makes any kind of layout, including 12-column-grid-with-gutter layouts incredibly easy, with no manual calculation required (grid-column-span etc.). Also, it's just logically really nice.

Obviously it is not widely supported by browsers yet (, but a prefixed version will be available in IE 10 . Issues are open for other major rendering engines: and

I would like to think that by providing a good layout.css for zen, we might stimulate the two leading FOSS rendering engines to pick this up a bit quicker.

Obviously this isn't super high priority at the moment, but it'd be awesome to the the web's most popular CMS' most popular theme implement this, if only as a proof of concept, so I thought I'd throw the discussion open.


naught101’s picture

Status: Active » Needs review
3.46 KB

Fairly basic, this is really nice to work with. This sheet uses a style layout (which is unneccesary, but might be good for adding extra regions, like a footer triptych or something.)

Unfortunately I have no way of testing the IE 10 preview (as I'm on linux), so it'd be great if anyone on windows could see if it works.

I'm not sure how padding works, but with the fixed width columns, I guess the padding would end up inside the column, and we could potentially get rid of the .section divs too.

naught101’s picture

Hrm. Just realised it's a whole OS installation. I might try this, if I get time, but if someone else wants to, feel free to jump in.

JohnAlbin’s picture

Zen base theme has a toggle for layout options. I would be totally fine with an experimental layout being one of the options.

Go for it!

JohnAlbin’s picture

Status: Needs review » Needs work

Waiting on a patch.

naught101’s picture

John: Ok, I will provide one. Did you just want the toggle for the layout options, or should I include some documentation? Is there anything else?

JohnAlbin’s picture

Did you just want the toggle for the layout options

The CSS layout is the most important thing and its accompanying docs. I can do the work to make sure that the Zen base theme includes it as an option in its theme settings.

JohnAlbin’s picture

Version: 7.x-5.x-dev » 7.x-6.x-dev

I'd still be up for this.

But I'm moving this to the next development branch. 7.x-5.x is too stable for this kind of change.

naught101’s picture

I'm also still interested in this, if only as a proof of concept. Attached is a patch that adds a grid-fixed.css layout, based loosely on the fixed.css file layout (the row/column sizes aren't the same though). I think it should work in a browser that fully supports the spec. Unfortunately, it doesn't work, even in IE10, because IE10 doesn't implement the full spec yet, which is understandable, since it's still evolving.

It doesn't work in IE10 because IE10 only allows child elements to be placed in the grid, and the .main-navigation, .main-content, .footer, and sidebars are all deeper descendants than children. There is allowance for this in the spec, but IE10 doesn't implement it (that I'm aware of, I tried position: grid; position: -ms-grid; and -ms-position:grid;). The navbar and footer could be fixed using a sub-grid in .main, but the sidebars are in an <aside>, so they won't fit in the grid. So at the moment the IE10 implementation would require the page.tpl.php to be modified, I guess causing it to loose some semantic structure.

MustangGB’s picture

Issue summary: View changes
steinmb’s picture

Status: Needs work » Needs review
Parent issue: » #2448145: [meta] Release Zen 7.x-6.0
JohnAlbin’s picture

Status: Needs review » Closed (won't fix)

Experimental layouts++

Experimental layouts that only work in IE--


This has been open a while. Feel free to create a new ticket for a more recent layout.

naught101’s picture

I'm not really doing any drupal stuff at the moment, but FWIW, the CSS3 Grid spec will be supported in the next versions of 4 major browsers (FF, Chrome, Safari, Opera):