CSS Grid Layout Module Level 2

Unofficial Proposal Draft,

This version:
https://drafts.csswg.org/css-grid-2/
Issue Tracking:
Inline In Spec
GitHub Issues
Editors:
Tab Atkins Jr. (Google)
Elika J. Etemad / fantasai (Invited Expert)
(Microsoft)

Abstract

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

Status of this document

1. Introduction

This level is currently maintained as a diff spec over the level 1 module [CSS-GRID-1].

2. Grid Containers

2.1. Establishing Grid Containers: the subgrid display value

Subgrids provide the ability to pass grid parameters down through nested elements, and content-based sizing information back up to their parent grid.

Name: display
New values: subgrid
subgrid
If the element is a grid item (i.e. it is in-flow and its parent is a grid container), this value makes the element a subgrid (which is a special type of grid container box, see §3 Subgrids) and consequently ignores its grid-template-* and grid-*-gap properties in favor of adopting the parent grid tracks that it spans.

Otherwise, it behaves as grid.

There is a proposal to have subgrid be instead a keyword for grid-template-rows and grid-template-columns, which would allow subgridding to apply to a single axis, not only both axes simultaneously. The same constraints apply as specified in §3 Subgrids, but only to the subgridded dimension.

As with the display: subgrid proposal, placement of all grid items, including subgrids and their sub-items, occurs before sizing, and track sizing in each axis is handled in independent steps as per the Grid Sizing Algorithm. In the case of a single-axis subgrid, the track sizing in a subgridded dimension treats each item in a given track in that axis as part of the parent grid; and in the other axis, the subgrid item is treated as a nested grid.

For example, suppose we have a parent grid container A which contains an item B that has subgridded columns and contains a grandchild C that has subgridded rows and grandchild C' that is simply a nested grid. When A sizes its columns it treats B’s items slotted into to A’s corresponding columns, but when A sizes its rows it treates B as a single item (a grid container with its own rows and some items including items C and C'). Similarly when B sizes its rows, it treats C’s items as slotted into B’s rows, but when B sizes its columns, it treats C as a single item, just as it does with C'. There is no relationship between C’s rows and A’s rows, because the rows in B are nested, not subgridded.

At a high level, the grid algorithm is:

  1. Size the columns
  2. Size the rows
  3. Adjust the columns (if needed based on final row sizes)

The grid sizing algorithm in this example would thus look like this:

  1. Resolve sizes of A’s grid columns, using the sizes of A’s grid items, treating B as empty but treating its children (including C and C') as items in grid A.

    The grid algorithm simply recurses into C'. For C, it’s more complicated:

    1. Size C’s columns
    2. Size C’s rows by sizing B’s rows
    3. Adjust C’s columns
    4. Return C’s final column sizes.

    A correct size for B’s rows requires C’s final column sizes, because the row size depends on the column size, and thus B’s rows could very well depend on C’s final column sizes. To break this cyclic dependency, we need to split the algorithm to depend on the initial approximation of C’s final column sizes, and do the adjustment pass later. So for C, we need to recurse into column sizing only, and pass that initial size up to A for its initial column sizing.

    When we size B’s rows later on, we will size C’s rows (which are subgridded), and finish up C’s sizing by finalizing its columns. If this resulted in a change, we have the opportunity to trigger an adjustment pass for A’s columns during its adjustment pass.

  2. Next, resolve sizes of A’s rows, using the sizes of A’s grid items, treating B as a single item.

    Since B, as a subgrid, has its sizing is split out into the multiple passes, the grid algorithm issues only a row-sizing recursion into B: Size B’s rows, treating C’ as a single item, requesting its final size, and treating C as an empty item and hoisting its children as items in grid B.

    B returns its final row size, which factors into A’s row sizing pass.

  3. Last, finalize A’s column sizes. If C’s final size changes as a result of the row-sizing pass through B, this should trigger a resizing of B’s columns, which should trigger a resizing pass on A’s column.

3. Subgrids

A grid item can itself be a grid container by giving it display: grid; in this case the layout of its contents will be independent of the layout of the grid it participates in.

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container by using display: subgrid, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align.

For example, suppose we have a form consisting of a list of inputs with labels:
<ul>
  <li><label>Name:</label> <input name=fn>
  <li><label>Address:</label> <input name=address>
  <li><label>Phone:</label> <input name=phone>
</ul>

We want the labels and inputs to align, and we want to style each list item with a border. This can be accomplished with subgrid layout:

ul {
  display: grid;
  grid: auto-flow / auto 1fr;
}
li {
  display: subgrid;
  grid-column: span 2;
  margin: 0.5em;
  border: solid;
  padding: 0.5em;
}
label {
  grid-column: 1;
}
input {
  grid-column: 2;
}

A subgrid behaves just like a normal grid container except that:

4. Masonry Layout

People have been trying to use CSS for masonry layouts for over a decade, and it doesn’t seem to have slowed, so it’s probably not just a layout fad. Would probably be worthwhile to address officially.

As far as I can tell, this is best done as a Grid feature; some of the features I’ve seen in masonry libraries (like large items spanning multiple masonry tracks) make Flexbox inappropriate. This also would reuse *so many* Grid features that it would be a shame to put together a brand new layout spec for it.

No clue what it would look like yet, tho. In handwavey terms, it’s a grid that’s only gridded "in one dimension", and free-flows in the other, with auto-flow.

Note that this is actually 100% possibly with Grid today, if your items are of known height, by making thousands of 1px tall rows, and setting the items' row-span to be equal to their height in px. (Or some lower-res multiple, like 10px rows.) Dense row auto-flow then magically makes Masonry happen. This is just a terrible hack that runs into memory/CPU issues due to the large number of rows. It suggests, tho, that making it work properly is mostly a matter of relaxing some constraints, rather than adding entirely new behavior.

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
A CSS style sheet.
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Requirements for Responsible Implementation of CSS

The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

Partial Implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

Implementations of CR-level Features

Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://www.w3.org/TR/css-align-3/
[CSS-DISPLAY-3]
Elika Etemad. CSS Display Module Level 3. URL: https://www.w3.org/TR/css-display-3/
[CSS-GRID-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Grid Layout Module Level 1. URL: https://www.w3.org/TR/css-grid-1/
[CSS-OVERFLOW-3]
David Baron; Florian Rivoal. CSS Overflow Module Level 3. URL: https://www.w3.org/TR/css-overflow-3/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

Property Index

No properties defined.

Issues Index

There is a proposal to have subgrid be instead a keyword for grid-template-rows and grid-template-columns, which would allow subgridding to apply to a single axis, not only both axes simultaneously. The same constraints apply as specified in §3 Subgrids, but only to the subgridded dimension.

As with the display: subgrid proposal, placement of all grid items, including subgrids and their sub-items, occurs before sizing, and track sizing in each axis is handled in independent steps as per the Grid Sizing Algorithm. In the case of a single-axis subgrid, the track sizing in a subgridded dimension treats each item in a given track in that axis as part of the parent grid; and in the other axis, the subgrid item is treated as a nested grid.

For example, suppose we have a parent grid container A which contains an item B that has subgridded columns and contains a grandchild C that has subgridded rows and grandchild C' that is simply a nested grid. When A sizes its columns it treats B’s items slotted into to A’s corresponding columns, but when A sizes its rows it treates B as a single item (a grid container with its own rows and some items including items C and C'). Similarly when B sizes its rows, it treats C’s items as slotted into B’s rows, but when B sizes its columns, it treats C as a single item, just as it does with C'. There is no relationship between C’s rows and A’s rows, because the rows in B are nested, not subgridded.

At a high level, the grid algorithm is:

  1. Size the columns
  2. Size the rows
  3. Adjust the columns (if needed based on final row sizes)

The grid sizing algorithm in this example would thus look like this:

  1. Resolve sizes of A’s grid columns, using the sizes of A’s grid items, treating B as empty but treating its children (including C and C') as items in grid A.

    The grid algorithm simply recurses into C'. For C, it’s more complicated:

    1. Size C’s columns
    2. Size C’s rows by sizing B’s rows
    3. Adjust C’s columns
    4. Return C’s final column sizes.

    A correct size for B’s rows requires C’s final column sizes, because the row size depends on the column size, and thus B’s rows could very well depend on C’s final column sizes. To break this cyclic dependency, we need to split the algorithm to depend on the initial approximation of C’s final column sizes, and do the adjustment pass later. So for C, we need to recurse into column sizing only, and pass that initial size up to A for its initial column sizing.

    When we size B’s rows later on, we will size C’s rows (which are subgridded), and finish up C’s sizing by finalizing its columns. If this resulted in a change, we have the opportunity to trigger an adjustment pass for A’s columns during its adjustment pass.

  2. Next, resolve sizes of A’s rows, using the sizes of A’s grid items, treating B as a single item.

    Since B, as a subgrid, has its sizing is split out into the multiple passes, the grid algorithm issues only a row-sizing recursion into B: Size B’s rows, treating C’ as a single item, requesting its final size, and treating C as an empty item and hoisting its children as items in grid B.

    B returns its final row size, which factors into A’s row sizing pass.

  3. Last, finalize A’s column sizes. If C’s final size changes as a result of the row-sizing pass through B, this should trigger a resizing of B’s columns, which should trigger a resizing pass on A’s column.
People have been trying to use CSS for masonry layouts for over a decade, and it doesn’t seem to have slowed, so it’s probably not just a layout fad. Would probably be worthwhile to address officially.

As far as I can tell, this is best done as a Grid feature; some of the features I’ve seen in masonry libraries (like large items spanning multiple masonry tracks) make Flexbox inappropriate. This also would reuse *so many* Grid features that it would be a shame to put together a brand new layout spec for it.

No clue what it would look like yet, tho. In handwavey terms, it’s a grid that’s only gridded "in one dimension", and free-flows in the other, with auto-flow.

Note that this is actually 100% possibly with Grid today, if your items are of known height, by making thousands of 1px tall rows, and setting the items' row-span to be equal to their height in px. (Or some lower-res multiple, like 10px rows.) Dense row auto-flow then magically makes Masonry happen. This is just a terrible hack that runs into memory/CPU issues due to the large number of rows. It suggests, tho, that making it work properly is mostly a matter of relaxing some constraints, rather than adding entirely new behavior.