CSS WG Blog Updates to CSS Grid Layout

Updates to CSS Grid Layout

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

There were lots of changes since the last Working Draft, including:

Renaming

As resolved in May as part of the Logical Directions Renaming, we’ve updated the grid placement longhand properties to be grid-row-start/grid-row-end/grid-column-start/grid-column-end with the shorthands grid-row/grid-column and grid-area. (We expect authors to use the shorthands most frequently.)

As discussed at the Tokyo F2F in June, we also renamed the grid-definition-rows/columns properties to grid-template-rows/columns, and changed grid-template to grid-template-areas. This gives all the properties defining the explicit grid the same prefix. (We also added a grid-template shorthand, for good measure.)

Shorthands

We adopted the grid shorthand syntax from the Template Layout module and added the ability to set values for auto-formatted grids. The template shorthand syntax allows authors to visually associate the various row and column measurements with their respective rows and columns in the named template areas.

Named Lines

The previous named lines syntax was pretty awkward, as pointed out in this thread. It also used strings as CSS-internal identifiers, which we don’t do anywhere else. We adopted the proposal from that thread, which was to switch to identifiers and use parentheses to group multiple names for the same position. This has the benefit of

• Using identifiers, consistent with the rest of CSS
• Providing visual grouping of names that identify the same location
• Allowing the named grid areas template syntax (which uses strings) to co-exist with named lines in the grid-template shorthand.

A more subtle change to named lines is that named grid areas now implicitly create named lines corresponding to their start and end edges, so you can more easily position something to the start or end edge of a particular named grid area without having to explicitly name those lines.

Other Changes

We’ve also clarified how absolutely-positioned items interact with the grid-placement properties, defined the static position of grid container children, rewrote and fixed errors in auto-placement algorithm.

And last but not least, we redesigned the subgrids feature, which allows alignment across the contents of a grid container’s immediate children.

Moving Forward

We still have some open issues, in particular some open discussion around the grid-auto-flow, that we hope to resolve soon. After that we expect most of the high-level design work to be complete, and then we’ll be digging into the gnarly layout details until we iron them all out.

Feedback

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([css-grid]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

« Previous article