What section of the css-grid specification addresses how a legend element should be handled if a fieldset element is set to display:grid?
As you know, a legend element is typically the first child of a fieldset element, yet rarely would anyone want it to be treated as a grid item.
I'm wondering if I need to take explicit styling-precautions to ensure that a legend element will NOT be treated as a grid item, or if the specification already has some rule (I'm overlooking) that means a legend element (by spec) is not a grid item.
This has changed; fieldset rendering has been siginificantly redefined and rewritten such that they may now be laid out as CSS grids. See Mats Palmgren's answer.
You won't find these details in the CSS spec, but in the HTML spec. And HTML is pretty specific about how the fieldset
and legend
elements should be rendered, and, for historical reasons, layout implementations for these elements is extremely rigid with very little accommodation for changes to layout modes via the display
property.
It is for this reason that display: grid
is simply not supported on fieldsets by any browser. In fact, just a few days ago there was a discussion around a proposed addition to the HTML spec to specify how the display
property should be treated on fieldset
and legend
elements, and this is what's slated to be added:
The
fieldset
element, when it generates a box (i.e., is not 'display: none' or 'display: contents'), is expected to act as follows:
...
The 'display' property is expected to act as follows:
If the computed value of 'display' is one of 'inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container', 'inline-flex', or 'inline-grid', then behave as 'inline-block'.
If the computed value of 'display' is one of 'block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell', 'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root', 'run-in', 'flex', or 'grid', then behave as 'block'.
This basically cements the current text which says that the fieldset
element is expected to establish a block formatting context, without specifying how it should behave should a UA choose not to follow this definition.
This, coupled with the current interoperable browser behavior, means that the layout of a legend
element will not be affected by its parent fieldset
having display: grid
, since its parent fieldset
will be prevented from becoming a grid container in the first place.