Tuesday, December 18th, 2007

W3C CSS Grid Positioning

Category: CSS, IE, Microsoft

Dimitri Glazkov has made a prediction that we will see CSS Grid Positioning in IE 8. This would make a lot of sense due to the fact that:

  • Alex Mogilevsky, and Markus Mielke, of Microsoft wrote the spec
  • If Microsoft comes out with a browser that goes above and beyond, they will be able to get rid of the monkey on their back
  • CSS grids are painful right now!

This module allows you to create a layout like this:


  1. body { columns:3; column-gap:0.5in; }
  2. img { float:page top right; width:3gr; }

It can be seen as a grid with 6 vertical lines and 2 horizontal lines.

We can use the grid lines to position the floating image

The statement “float:page top right” here positions the image at the top right corner of the page (as defined in [CSS3GCPM])

“width:3gr” makes image 3 “grid units” wide, where a “grid unit” is the distance between two adjacent grid lines. Each boundary between a column and a gap automatically produces a grid line, therefore to specify “two columns, including the gap between columns, but not including any gaps outside the columns” we can just say “3gr”.

You will see more detailed examples, with lots of gr’s (grid units).

Posted by Dion Almaer at 6:38 am

3.7 rating from 55 votes


Comments feed TrackBack URI

That’s a daring prediction … but at least it will allow him to bash browser vendors in a “these-predictions-failed” post, which are so popular these days.

Comment by Morgan Roderick — December 18, 2007


Comment by Jeria — December 18, 2007

interesting concept. Ms actually bothered submitting a spec to w3c??? LOL

Comment by Site Smart — December 18, 2007

“CSS grids are painful right now!” – Oh tables, good old tables :D

Comment by deadcabbit — December 18, 2007

Cool, css tables. 100% height?

Comment by emehrkay — December 18, 2007

Anyone here remember the tag?


I predict this will meet with as much success.

Comment by Marty — December 18, 2007

Anyone here remember the MULTICOL tag, rather?

Comment by Marty — December 18, 2007

That syntax and thinking makes my head hurt.

Comment by Jon Hartmann — December 18, 2007

Let’s hope it comes soon.
Floats and positioning can be as clumsy as tables… It’s about time that CSS got a proper, intentional grid…

Comment by Premasagar — December 18, 2007

Yes! Proper column-grid layout is what I’ve been waiting for!!
It is an effective technique, used in all types of print design and familiar to readers all over the world — once column layout is in a spec, it will change webpage design forever, mark my words.
I started out as a layout designer for print, and print layout can make web layout look like a middle-school yearbook made on a photocopier. Web layout often looks like a cut-and-paste collage, because there are so many restrictions on how content can flow, and it is very difficult to relatively align and size page elements.
This spec may look like a headache to coders, but it’s just the numbers side of a Pagemaker or Quark layout. It will actually be much easier to do WYSIWYG with this spec — because elements are relatively aligned and sized they will basically put themselves into place.
Especially as we move forward with technology, screen sizes vary more widely. Column layout will help webpages adapt to all screen sizes, small or large. Imagine being able to have an article presented in 4 columns on a widescreen, and 1 long column on a handheld. — Or you could have the handheld snap-scroll horizontally by column. Sounds simple, but it can’t be done now without heavy javascript (which I am investigating, because I want this technique for handhelds).
Up with columns!! Up up up!

Comment by Charles — December 18, 2007

Multicolumn layout is already quite widely supported in shipping browsers. Safari 3 (as shipping in Mac OS X 10.4.11 and 10.5), though sadly not mobile Safari support it with the -webkit- prefix. Firefox 2 (and possible even 1.5) support it with the -moz- prefix as well.


Comment by John Allsopp — December 18, 2007

Just to clarify, the grid aspects are not as yet supported by either Firefox or Safari faict, but the multi-column properties are


Comment by John Allsopp — December 18, 2007

i don’t like the syntax of this concept. i also get a headache if i think of the future, where microsoft invents a grid layout without talking to apple/opera/mozilla …

Comment by Harald — December 18, 2007

Is there a link for Dmitri’s prediction? I’d like to read his reasoning (personally, I think it would be awesome if IE were to implement this (presuming they implemented it correctly). If they did, it would be in the other three engines faster than you can say “IE7 is the new IE6”

Comment by skippyK — December 18, 2007

Let’s not make CSS more complicated then it is. This spec, especially the syntax, could use some rethinking. The syntax looks more complex then what’s actually created with it. Hopefully some effort will be spent on making it as readable and easy to use as the rest of CSS.

I’d rather use the current spec with a bit of creativity and get the job done then using: body { grid-columns: “left-edge” * 1em * 0.5em “center” 0.5em * 1em * “right-edge”; }, no thanks.

Comment by staaky — December 18, 2007

This seems neat. But why not just get display:table correct? We all know what tables do and how they work. Why bother reinventing this wheel.

Comment by Dustin Diaz — December 18, 2007

Dustin, I’m afraid the display:table spec will be of little use since it has no equivalent for colspan and rowspan. This grid spec looks very promising even if the syntax is a bit obscure. I’m also looking forward to implementations of the CSS3 template spec: http://www.w3.org/TR/2005/WD-css3-layout-20051215/#template-based

Comment by Menno — December 19, 2007

Display:table (and all the associated properties) would be awesome, but it’s still not a complete solution. Principally, it still demands source ordering be in visual rather than semantic order (in fact, for many layouts, display:table etc. would be a step backwards). I’m not dissing display:table, or display:*, all current display values have incredibly useful applications and ubiquitous support for them would completely change how we do our jobs for the better. But the CSS3 grid layout spec is attempting to solve different layout issues.

Comment by skippyK — December 19, 2007

Leave a comment

You must be logged in to post a comment.