[css-grid] Setting of gutter properties when using the 'grid' shorthand

[huijing]

With reference to 7.8 Grid Definition Shorthand: the 'grid' property, which says

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.

The note below then states, “Also, the gutter properties are reset by this shorthand, even though they can’t be set by it.”

So, is it possible to set the gutter properties or not? If so, how? The grid-template syntax does not cater for setting of grid gaps.

[mrego]

grid shorthand resets the gutter properties, but you cannot set them.

So if you has the following css:

  grid-gap: 20px;
  grid: 50px 50px / 100px 100px;

The gutters of your grid are reset to 0px.
You'd need to change the order of the properties in the declaration:

  grid: 50px 50px / 100px 100px;
  grid-gap: 20px;

Then you'll have 20px gutters.

Note that grid-template shorthand doesn't reset the gutter properties.

See the examples: http://output.jsbin.com/ligonuv

[huijing]

@mrego thank you for clearing that up for me. Would it be better to add the word “reset” to the sentence so it reads like this instead?

and resets the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

[SelenIT]

grid shorthand resets the gutter properties, but you cannot set them.

What is the rationale behind this decision? This behavior is rather non-intuitive. Reset-only sub-properties aren't common in CSS. And I can imagine multiple use cases where one might want to redefine grid (e.g. change both the number of explicit tracks and the size of auto tracks for different screen size via MQ) but preserve the existing gutters.

[tabatkins]

You can't set the gutters via grid because grid is already a complicated grammar, and we can't reasonably squeeze the gutter settings in. We'd prefer to avoid another repeat of font or background or animation.

The gutter properties are reset by grid for two reasons - one, it makes sense syntactically (a foo property almost always resets all the foo-* properties), and two, often when you're using grid it's to cleanly set up a fresh grid (that's usually why you use shorthands), and having gutters lingering from a cascaded declaration can have undesirable effects. Yes, there are definitely cases where you do want the gutters to persist, but I don't think they're the majority case, and overall it's overridden by the syntax-consistency argument. You can always just set the subproperties directly in the MQs.

[fantasai]

Reopening because we've got several points of feedback asking for the gap properties to not be reset by the grid shorthand. Rationale for this is that spacing often stays constant while the overall layout parameters change: gaps are more analogous to padding on the grid container and margins on the items, which are not reset by the grid shorthand. So the grid shorthand should control the grid's overall placement and size relationships, whereas spacing concerns should be independent.

[css-meeting-bot]

The CSS Working Group just discussed grid-gap, and agreed to the following resolutions:

• RESOLVED: add gap shorthand
• RESOLVED: Tables are not changed
• RESOLVED: Add gap properties to align spec

The full IRC log of that discussion

<astearns> topic: grid-gap
<fantasai> https://github.com//issues/1696
<fantasai> https://github.com//issues/1036
<astearns> github: https://github.com//issues/1036
<dauwhe> TabAtkins: we decided that grid gutter should be reset by shorthand
<astearns> zakim, open queue
<Zakim> ok, astearns, the speaker queue is open
<dauwhe> ... authors have given feedback that the opposite is true
<dauwhe> ... so are annoyed to reestablish their gutters
<dauwhe> ... so we propose to change that, and stop resetting gutters in shorthand
<dauwhe> fantasai: that's the basis of that
<dauwhe> ... the other issue is 1969
<dauwhe> s/1969/1696/
<dauwhe> TabAtkins: the grip prop is already complex
<dauwhe> ... worst case is having some gutters you didn't intend
<dauwhe> ... a proposal to handle this and other author feedback is to rework how we handle gutters
<dauwhe> ... rename them and apply them to all layout modes where it makes sense
<dauwhe> fantasai: we had originally designed them for multicol
<dauwhe> TabAtkins: didn't make sense for column gap to be reset by grid
<dauwhe> fantasai: so we undo the link, undo grid prefix
<dauwhe> ... make colgap and rowgap apply to flex containers
<dauwhe> ... this is highly desired
<dauwhe> TabAtkins: they want min spacing between flex items and flex lines,
<dauwhe> fantasai: one comment is can we have one set of properties to make it easy to learn
<dauwhe> astearns: is it hard to change flex distro algo?
<dauwhe> TabAtkins: it's easy
<dauwhe> fantasai: as a last point, nice to obsolete border-spacing
<dauwhe> ... controls spaces between cells, and it inherits
<dauwhe> TabAtkins: it's the only layout property that inherits
<dauwhe> fantasai: if we could redesign, it wouldn't inherit, and would be logical
<dauwhe> TabAtkins: normal would be zero by default, in grid and flex, and 1em in multicol
<astearns> q?
<dauwhe> ... because all the gridgap stuff has shipped, so we have to keep
<Rossen> the gap property is coming! https://lemontree.se/wp-content/uploads/2014/10/titles-Mind-the-Gap-Large.jpg
<dauwhe> ... only thing we break will be grid gap reset
<dauwhe> fantasai: we need shorthand for column gap and grid gap
<dauwhe> Florian_: column-gap would be shorthand for grid-column-gap etc
<dauwhe> fantasai: none of them inherit
<dauwhe> bdc: there's a proposal for a new gap shorthand?
<dauwhe> fantasai: the proposal is to alias grid-row-gap
<dauwhe> astearns: it's not temporary
<dauwhe> fantasai: it might be permanent
<dauwhe> ... the goal is to use column-gap and row-gap, and have a shorthand for the two of them
<dauwhe> fremy: track-gap
<dauwhe> fantasai: people are using shorthand more often
<dauwhe> ... we'll have to run some data, but we might be able to remove the longhands
<dauwhe> TabAtkins: one less alias to maintain
<dauwhe> Florian_: weird to use grid stuff to reset your flex
<dauwhe> SimonSapin: they would be aliases?
<dauwhe> TabAtkins: one is shorthand of the other
<dauwhe> fantasai: page-break properties are shorthands of the break-* properties
<dauwhe> SimonSapin: so these would be shorthands with one longhand each
<dauwhe> TabAtkins: they'd both access the same underlying value
<dauwhe> SimonSapin: what happens in CSSOM?
<fantasai> SimonSapin, https://www.w3.org/TR/css-break-3/#page-break-properties
<dauwhe> astearns: sounds like there are 3 things
<dauwhe> ... 1 changing what's set by grid shorthand
<dauwhe> ... 2 adding connection between the various gaps
<dauwhe> ... 3 is some shorthand for all this
<dauwhe> TabAtkins: 4 doing table cleanup
<dauwhe> ... but it would be nice to have everything use same gaps
<dauwhe> astearns: are there any objections to changoing grid shorthand to not reset column and row gaps?
<dauwhe> Resolved: change what grid shorthand resets
<dauwhe> dbaron: who will be first to implement?
<dauwhe> Rossen: we'll do it
<dauwhe> bdc: might not break anything
<dauwhe> astearns: will only change behaviour if they set gaps, used shorthand, etc
<dauwhe> rachelandrew: most people are not using shorthands
<dauwhe> plinss: they do whatever you tell them to :)
<dauwhe> astearns: so edge is willing to go first?
<fantasai> s/whatever/pretty much whatever/
<dauwhe> ... we're yet to release the updated grid
<fantasai> s/them to/them to do at this point/
<dauwhe> Rossen: I wish we didn't have to do the aliases
<dauwhe> astearns: the second thing: any more discussion on column-gap and row-gap applying to all layout modes with gaps?
<dauwhe> astearns: there will be a communication issue
<dauwhe> iank_: which layout modes?
<dauwhe> TabAtkins: multicol, grid, flex, and maybe table
<dauwhe> fantasai: multi-col, grid, and flex all respond to the column-gap and row-gap properties
<dauwhe> dbaron: which property has the normal value?
<dauwhe> TabAtkins: column-gap and row-gap
<dauwhe> ... for multicol it will be 1em, which is no change
<dauwhe> astearns: what does column-gap normal due in grid and flex?
<dauwhe> TabAtkins: Zero
<dauwhe> s/due/do/
<dauwhe> dbaron: column-gap already has a normal value
<dauwhe> astearns: we're adding normal to row-gap
<dauwhe> dbaron: this is renaming thing for grid back to the old multicol things
<dauwhe> TabAtkins: yes
<dauwhe> dbaron: same syntax?
<dauwhe> TabAtkins: yep
<dauwhe> ... adding normal keyword to row-gap
<dauwhe> fremy: do we need grid-row-gap and grid-column-gap
<dauwhe> ... they are not interoperable
<dauwhe> TabAtkins: why
<dauwhe> fremy: in the sense that lots of browsers don't support grid
<dauwhe> ... so there are not a lot of websites that use grid, and they were made in the last six months
<dauwhe> TabAtkins: maybe,
<dauwhe> fremy: to me this is a breaking change
<dauwhe> TabAtkins: if they are using grid-column-gap etc it will break things
<dauwhe> ... we need to look into how often they are use
<dauwhe> ... default to safe answer of aliasing them
<dauwhe> Rossen: can we resolve?
<dauwhe> astearns: any other comments on using these in grid, flex, and multicol
<fantasai> I agree with Tab, let's keep the aliases for now but look into dropping them
<dauwhe> dbaron: this is new feature for flex?
<dauwhe> TabAtkins: this is the most requested feature for flex
<dauwhe> bdc: the gap shorthand property is part of this resolution?
<dauwhe> astearns: we will have a shorthand, we're just not sure what it's called
<dauwhe> fantasai: we don't have to figure it out now. one thing at a time
<dauwhe> fantasai: proposed resolution; existing column-gap and new row-gap with same syntax apply to flex, grid, and multicol, and alias to current props
<dauwhe> dbaron: is handling of percentagges between the two consistent?
<dauwhe> Florian_: multicol didn't have percentage until recently
<dauwhe> ... not implemented yet
<dauwhe> ... spec says % should work in multicol
<dauwhe> TabAtkins: the definitions are identical
<dauwhe> astearns: no concern?
<dauwhe> TabAtkins: they're the same
<dauwhe> astearns: any objection?
<dauwhe> Resolved: column-gap and row-gap apply to flex, grid, and multicol
<dauwhe> bdc: we could use gap as the shorthand
<dauwhe> TabAtkins: do we have three letter properties?
<dauwhe> astearns: options for shorthand are "gap" or pre=existing "grid-gap"
<dbaron> the only 3-letter properties in Gecko are 'top' and 'all'. A whole bunch of 4-letter ones, though...
<dauwhe> astearns: we have to maintain grid-gap as shorthand, but that could be a discoverability problem
<Rossen> https://lemontree.se/wp-content/uploads/2014/10/titles-Mind-the-Gap-Large.jpg
<dauwhe> astearns: the proposal is to add a shorthand for column-gap and row-gap that is just gap and aliased to grid-gap
<dauwhe> fremy: I don't know if we have a shorthand aliased to a shorthand
<glazou> LOL
<dauwhe> myles: the question isn't that you have it, it's that you can do it :)
<fantasai> s/Resolved/RESOLVED/
<dauwhe> astearns: any objection?
<dauwhe> fantasai: I think it's unnecessary aliasing, but I won't object
<dauwhe> Rossen: there's probably not a ton of content out there,
<dauwhe> ... I would prefer not to ship grid-gap at all
<dauwhe> ... I don't mind aliasing the grid ones for a while
<dauwhe> ... given this is six months of a feature, I'd be surprised if we couldn't do this
<dauwhe> rachelandrew: I'll update all my stuff. I've already tweeted :)
<dauwhe> fantasai: rachel and Jen can get the information out there
<dauwhe> ... but they can't create a forcing function for people who've already been trained
<dauwhe> ... but microsoft can do this
<dauwhe> Rossen: that means interop pain for us
<dauwhe> fremy: I'd rather not write a bunch of aliasing code that we're going to remove in six months
<dauwhe> fantasai: it's not going to be difficult for you, it will be difficult for authors
<fantasai> s/difficult/annoying/
<dauwhe> Rossen: I don' think this is a q of implementaiton
<fantasai> s/authors/authors during the transition/
<dauwhe> ... we'll decide about aliases internally
<fantasai> s/microsoft can do this/microsoft can do this by not shipping grid-*-gap/
<dauwhe> ... I won't promise we'll ship without grid-column-gap etc, but
<dauwhe> astearns: the hope is that we're early enough that we can eventually remove
<dauwhe> Rossen: we'll ship very soon
<dauwhe> Florian_: grid is unusual in that most browsers shipped in a very short time
<dauwhe> ... even though it's only six months, but a lot happened in those six months
<Rossen> s/we'll ship very soon/when we ship/
<dauwhe> iank_: the main compat risk is chrome mobile(???)
<fantasai> TabAtkins, can you run a search on occurrances of grid-row-gap and grid-column-gap?
<dauwhe> astearns: proposed resolution: add gap shorthand
<TabAtkins> fantasai, probably
<dauwhe> RESOLVED: add gap shorthand
<dauwhe> astearns: do we want to talk about tables?
<dauwhe> fantasai: we have a solid proposal
<dauwhe> TabAtkins: a single convenient interface to everything that can have gaps
<dauwhe> dbaron: the weird thing about border space being inherited
<dauwhe> ... applies only to table with border-collapse : separate
<dauwhe> ... border-collapse is inherited
<dauwhe> ... most tables will be separated
<dauwhe> fantasai: unless you are setting column-gap or row-gap on a table already, then there's no effect
<dauwhe> ... the new propoerties don't inherit
<dauwhe> dbaron: if applies to table, then will apply to sides of columns, and row gaps apply to tops/bottoms
<dauwhe> fantasai: we're not saying border-spacing reads out from column-gap
<dauwhe> ... if the value of column-gap is normal, then look at border-spacing prop
<dauwhe> dbaron: that would be weird if it applied inside, but not around edge
<dauwhe> ... the full value plus padding on table element
<dauwhe> fantasai: actions are to have these acts to apply only to the interior
<dauwhe> dbaron: I think that's a bad idea
<dauwhe> TabAtkins: either don't apply at all, or affect outside?
<dauwhe> fantasai: this is low-priority
<dauwhe> TabAtkins: it applys to every table
<dauwhe> astearns: one solution is to not change tables
<dauwhe> ... that's my general rule: don't mess with tables
<dauwhe> fantasai: fallback issue
<dauwhe> ... table displays are used for fallback in flex/grid
<dauwhe> ... since it acts similarly
<dauwhe> ... we will have authors using flex or grid model with these gap properties
<gregwhitworth> q+
<dauwhe> ... in implementations that don't support them, they will fall back to table
<dauwhe> ... but they don't support new gap properties
<dauwhe> gregwhitworth: so it won't matter
<dauwhe> iank_: I find this strange because we're not messing with table
<dauwhe> s
<gregwhitworth> ack gregwhitworth
<dauwhe> astearns: proposed resolution: don't have the new gap properties apply to tables
<dauwhe> TabAtkins: where do these properties go
<dauwhe> RESOLVED: Tables are not changed
<dauwhe> TabAtkins: align is the best place
<dauwhe> ... it only applies to things taht are content-distributed
<dauwhe> ... grid and flex will have sections pointing to this
<dauwhe> astearns: and multicol
<dauwhe> rachelandrew: same as any of the align stuff
<dauwhe> Florian_: we need to fix grid, but just add it to other spec
<dauwhe> TabAtkins: we need a section in grid
<dauwhe> Florian_: in flex maybe not
<dauwhe> astearns: nothing to correct in flex, just informative
<dauwhe> RESOLVED: Add gap properties to align spec
<dauwhe> Rossen: how far along is this spec?
<dauwhe> fantasai: trying to get to cr
<dauwhe> astearns: I think we're done with gaps for now!
<dauwhe> ... are there other grid issues?
<dauwhe> Rossen: Do we want to go over many of them?
<dauwhe> ... we don't have to discuss all of them now
<dauwhe> astearns: keep remaining grid discussion to 30 minutes
<fantasai> https://github.com//issues/1320
<fantasai> https://github.com//issues/1319

[dbaron]

Gecko bug 1387410 is to implement the resolution (not highlighted above, but in the details) that the grid shorthand no longer resets grid-row-gap and grid-column-gap.

[tabatkins]

All right, Grid has been altered to not reset the gap properties, and to refer to the Align spec for the syntax of its gap properties.

Align has been altered to define row-gap/column-gap/gap (plus the legacy grid-* aliases), and defer precise definitions of the meanings to the relevant specs. There's a TODO for Flexbox's definitions.

[mrego]

Gecko bug 1387410 is to implement the resolution (not highlighted above, but in the details) that the grid shorthand no longer resets grid-row-gap and grid-column-gap.

JFYI, this has been fixed in Blink and WebKit.
A new test has been added to WPT repo too:
http://w3c-test.org/css/css-grid-1/grid-definition/grid-shorthand-001.html

[mrego]

Also Edge and Firefox have fixed this.