Re: [css-grid] grid shorthand property doesn't specify gutter properties

On Sat, Dec 19, 2015 at 7:59 AM, Luke Stebbing <luke@lukestebbing.com> wrote:
> According to the spec, grid-column-gap and grid-row-gap can be set by the
> grid shorthand property:
>
>> The grid property is a shorthand that sets all of the explicit grid
>> properties (grid-template-rows,grid-template-columns, and
>> grid-template-areas), all the implicit grid properties (grid-auto-rows,
>> grid-auto-columns, and grid-auto-flow), and the gutter properties
>> (grid-column-gap and grid-row-gap) in a single declaration.
>
>
> However, the gutter properties don't appear in the Value line:
>
>> Value: <‘grid-template’> | [ <‘grid-auto-flow’> [ <‘grid-auto-rows’> [ /
>> <‘grid-auto-columns’> ]? ]? ]
>
>
> I'm specifically wondering whether something like:
>
> grid: 4px
>
>
> is equivalent to:
>
> grid-column-gap: 4px
> grid-row-gap: 4px

It is not - "grid: 4px" is actually invalid (it doesn't match any of
the grammar branches in 'grid').

The 'grid' shorthand *sets* the gutter properties, but doesn't allow
you to specify them - they just reset to their initial (0) value.
This happens in a few other cases in CSS, where a shorthand is already
too complex to reasonably add a new subproperty, but the subproperty
should be set alongside all the others; the author would generally
expect 'grid' to set all the grid-specifying properties, and would be
surprised if an older 'grid-row-gap' still applied.

This means that if you want to set everything, you need to specify
'grid', and then 'grid-gap' after it.

(It's *almost* possible to unambiguously add the gap properties to the
shorthand, but not quite - if you placed the gap values after the
<'grid-template'> stuff, it's ambiguous where the column-list ends and
the gaps begin.  But even if it was unambiguous, it would be overly
complicated and we'd probably still act the same as we do now.)

~TJ

Received on Tuesday, 22 December 2015 17:19:30 UTC