New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
huijing opened this Issue Feb 14, 2017 · 10 comments

Comments

Projects
None yet
7 participants
@huijing
Contributor

huijing commented Feb 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mrego

mrego Feb 14, 2017

Member

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

Member

mrego commented Feb 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@huijing

huijing Feb 15, 2017

Contributor

@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.

Contributor

huijing commented Feb 15, 2017

@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.

@fantasai fantasai added the css-grid-1 label Mar 30, 2017

@fantasai fantasai closed this Mar 30, 2017

triple-underscore added a commit to triple-underscore/triple-underscore.github.io that referenced this issue Mar 31, 2017

[css-grid] 各種更新
[css-grid]
Clarify handling of collapsed gutters when appl…
w3c/csswg-drafts@c263d20
454453a4d46

Move motivation section to be in Intro.
Fixes w3c/csswg-drafts#1115
w3c/csswg-drafts@ecb4878
01e87b50a5d
(記述の移動 — 実質的な更新はない)

Clarify resetting behavior of 'grid' shorthand.
w3c/csswg-drafts#1036
w3c/csswg-drafts@1c2e837
ac642b6353a
@SelenIT

This comment has been minimized.

Show comment
Hide comment
@SelenIT

SelenIT Jun 29, 2017

Collaborator

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.

Collaborator

SelenIT commented Jun 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Jun 30, 2017

Member

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.

Member

tabatkins commented Jun 30, 2017

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

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Aug 4, 2017

Contributor

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.

Contributor

fantasai commented Aug 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@css-meeting-bot

css-meeting-bot Aug 4, 2017

Member

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/w3c/csswg-drafts/issues/1696
<fantasai> https://github.com/w3c/csswg-drafts/issues/1036
<astearns> github: https://github.com/w3c/csswg-drafts/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/w3c/csswg-drafts/issues/1320
<fantasai> https://github.com/w3c/csswg-drafts/issues/1319
Member

css-meeting-bot commented Aug 4, 2017

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/w3c/csswg-drafts/issues/1696
<fantasai> https://github.com/w3c/csswg-drafts/issues/1036
<astearns> github: https://github.com/w3c/csswg-drafts/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/w3c/csswg-drafts/issues/1320
<fantasai> https://github.com/w3c/csswg-drafts/issues/1319
@dbaron

This comment has been minimized.

Show comment
Hide comment
@dbaron

dbaron Aug 4, 2017

Member

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.

Member

dbaron commented Aug 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Aug 9, 2017

Member

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.

Member

tabatkins commented Aug 9, 2017

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.

@tabatkins tabatkins closed this Aug 9, 2017

chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Sep 5, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
WPT-Export-Revision: 545ec65a5790d330fccf451f8b2715af5db83069

chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Sep 5, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
WPT-Export-Revision: 8fa88f38b8226ee5696232ca2fa3a8adf1d13ca0

chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Sep 6, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: meade_UTC10 <meade@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
WPT-Export-Revision: bcfbe8737e6497462d02e88d488949d924bf0808

chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Sep 6, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: Sergio Villar <svillar@igalia.com>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: meade_UTC10 <meade@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#499901}

chromium-wpt-export-bot added a commit to web-platform-tests/wpt that referenced this issue Sep 6, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: Sergio Villar <svillar@igalia.com>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: meade_UTC10 <meade@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#499901}
@mrego

This comment has been minimized.

Show comment
Hide comment
@mrego

mrego Sep 6, 2017

Member

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

Member

mrego commented Sep 6, 2017

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

hubot pushed a commit to WebKit/webkit that referenced this issue Sep 6, 2017

rego@igalia.com
[css-grid] grid shorthand should not reset the gutter properties
https://bugs.webkit.org/show_bug.cgi?id=176375

Reviewed by Sergio Villar Senin.

LayoutTests/imported/w3c:

Import new test from WPT.

* web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001-expected.txt: Added.
* web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001.html: Added.
* web-platform-tests/css/css-grid-1/grid-definition/w3c-import.log:

Source/WebCore:

The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r195529, so this is somehow
a revert of that change.

Test: imported/w3c/web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001.html

* css/CSSProperties.json:
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::consumeGridShorthand):

LayoutTests:

Update the test to check the new behavior.

* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@221668 268f45cc-cd09-0410-ab3c-d52691b4dbfc

MXEBot pushed a commit to mirror/chromium that referenced this issue Sep 7, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: Sergio Villar <svillar@igalia.com>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: meade_UTC10 <meade@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#499901}
@mrego

This comment has been minimized.

Show comment
Hide comment
@mrego

mrego Sep 11, 2017

Member

Also Edge and Firefox have fixed this.

Member

mrego commented Sep 11, 2017

Also Edge and Firefox have fixed this.

bertogg pushed a commit to Igalia/webkit that referenced this issue Oct 31, 2017

carlosgc@webkit.org
Merge r221668 - [css-grid] grid shorthand should not reset the gutter…
… properties

https://bugs.webkit.org/show_bug.cgi?id=176375

Reviewed by Sergio Villar Senin.

LayoutTests/imported/w3c:

Import new test from WPT.

* web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001-expected.txt: Added.
* web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001.html: Added.
* web-platform-tests/css/css-grid-1/grid-definition/w3c-import.log:

Source/WebCore:

The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r195529, so this is somehow
a revert of that change.

Test: imported/w3c/web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001.html

* css/CSSProperties.json:
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::consumeGridShorthand):

LayoutTests:

Update the test to check the new behavior.

* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:

git-svn-id: http://svn.webkit.org/repository/webkit/releases/WebKitGTK/webkit-2.18@223346 268f45cc-cd09-0410-ab3c-d52691b4dbfc

rachelandrew added a commit to rachelandrew/web-platform-tests that referenced this issue Nov 8, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: Sergio Villar <svillar@igalia.com>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: meade_UTC10 <meade@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#499901}

jakearchibald added a commit to jakearchibald/web-platform-tests that referenced this issue Nov 16, 2017

[css-grid] grid shorthand does not reset gutter properties
The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r370102, so this is somehow
a revert of that change.
The patch adds a new test to WPT verifying the expected behavior.

BUG=761905
TEST=external/wpt/css/css-grid-1/grid-definition/grid-shorthand-001.html

Change-Id: Ib8b0591a0132c6520c3cfd8f13fb2cf2a33e1be0
Reviewed-on: https://chromium-review.googlesource.com/650406
Reviewed-by: Sergio Villar <svillar@igalia.com>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: meade_UTC10 <meade@chromium.org>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#499901}

ashkulz pushed a commit to ashkulz/webkit that referenced this issue Apr 13, 2018

carlosgc@webkit.org
Merge r221668 - [css-grid] grid shorthand should not reset the gutter…
… properties

https://bugs.webkit.org/show_bug.cgi?id=176375

Reviewed by Sergio Villar Senin.

LayoutTests/imported/w3c:

Import new test from WPT.

* web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001-expected.txt: Added.
* web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001.html: Added.
* web-platform-tests/css/css-grid-1/grid-definition/w3c-import.log:

Source/WebCore:

The CSS WG has resolved that the "grid" shorthand shouldn't reset
the gutter properties anymore:
w3c/csswg-drafts#1036

This was originally implemented in r195529, so this is somehow
a revert of that change.

Test: imported/w3c/web-platform-tests/css/css-grid-1/grid-definition/grid-shorthand-001.html

* css/CSSProperties.json:
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::consumeGridShorthand):

LayoutTests:

Update the test to check the new behavior.

* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:

git-svn-id: http://svn.webkit.org/repository/webkit/releases/WebKitGTK/webkit-2.18@223346 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment