• 201318 Apr

    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 publication 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 [email protected] 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 are also enabled on this post (and over on the CSSWG blog). The editors strongly encourage feedback and suggestions for improvement from the design community!

    You can skip to the end and leave a response.

  • Comments

    • 01.

       What’s the problem was with the classical col/span model? Lines model looks very complex and unusual :(

    • 02.

       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;


Advertise here?