Tuesday, December 18th, 2007
W3C CSS Grid Positioning
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:
with:
-
-
body { columns:3; column-gap:0.5in; }
-
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).
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.
http://www.sitepoint.com/blogs/2007/10/12/css-positioning-three-specs-better-than-one/
interesting concept. Ms actually bothered submitting a spec to w3c??? LOL
“CSS grids are painful right now!” - Oh tables, good old tables :D
Cool, css tables. 100% height?
Anyone here remember the tag?
http://www.htmlref.com/reference/AppA/tag_multicol.htm
I predict this will meet with as much success.
Anyone here remember the MULTICOL tag, rather?
That syntax and thinking makes my head hurt.
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…
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!
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.
john
Just to clarify, the grid aspects are not as yet supported by either Firefox or Safari faict, but the multi-column properties are
j
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 …
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″
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.
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.
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
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.