CSS WG Blog CSS Grid Layout Overhaul

CSS Grid Layout Overhaul

The CSS Working Group has published an updated Working Draft of CSS Grid Layout. This CSS module defines a two-dimensional grid-based layout system optimized for user interface design.

This is a major update: not only has the draft generally been reorganized and much of the prose rewritten to fill in missing details, avoid repetition, improve precision and terminology, and ensure alignment with Flexbox, but it’s switched to a new positioning model. The old grid layout model uses properties to indicate the starting row/column and the item’s span. The new grid layout model positions each edge of the item to a grid line.

There are tons of issues marked in the draft, such as:

• What to do by default with items that aren’t positioned?
• Best way to indicate that the contents of an element should align the parent grid?
• Better names for various properties?
• Better syntax for defining the size of the rows/columns?

We’re totally looking for feedback, particularly on syntax issues, so please send comments to the (archived) public mailing list www-style@w3.org with the spec code ([css-grid-layout]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Comments have also been enabled on the cross-post over at CSS3.info. We strongly encourage feedback and suggestions for improvement from the design community!

« Previous article Next article »

Comments

• CSS Grid Layout Overhaul — Comments Needed! - CSS3 . Info 2013-04-18 21:35:29 [...] have also been enabled on this post and it’s crosspost over on the CSSWG blog. The editors strongly encourage feedback and suggestions for improvement [...]
• Perry Harlock 2013-05-01 14:43:09 Just a thought on the syntax for CSS3 grids: When reading through the long hand it doesn\'t really make sense...maybe it\'s my lack of print grid knowledge but grid-start: 2; grid-end: 3; grid-before: 3; grid-after: 5; doesnt really tell me anything without me having to translate what it is saying. In my mind it would make more sense to say col-start:2; col-end:3; row-start:3 row-end:5 But maybe that\'s just me.
• Christopher Grandison 2013-05-03 15:06:12 The old gird layout model is easier to visualize. This.. grid-start: 2; grid-end: 3; grid-before: 3; grid-after: 5; Instantly poses questions: Starts where? Ends when? After what? I\'m sure there are answers, but it should be obvious in the syntax. which the old syntax does.. grid-column-position: 2; grid-column-span: 1; grid-row-position: 3; grid-row-span: 2;
• Schepp 2013-05-06 13:35:10 I find the new property names super confusing. It makes no sense to name the start property on one axis \"start\" and on the other \"before\". It\'s nowhere intuitive, it could as well be swapped. The old syntax is way more clear on that. If you insist on defining line-boundaries, then why not use: grid-start-x; x1; grid-start-y: y1; grid-end-x: x2; grid-end-y: y2; grid-start: x1 y1; grid-end: x2 y2; grid-boundary: x1 y1 x2 y2;
• Ryan 2013-05-27 06:15:33 I\'m confused why the w3c hasn\'t merged the CSS Grid Layout and the CSS Grid Template Layout Module specifications? They seem like one in the same to me, in many respects, and both have been updated as Editor\'s Drafts in the last month.
• rohit 2013-07-12 18:27:38 grid layout in css wow....love it....