Add support for grid-gap

[yepninja]

#951

[ai]

Awesome.

What do you think if I asked on Twitter, is it a safe way to work with grid-gap?

[yepninja]

I think it's great idea to ask community. Do you want to receive meanings of experts, or do you want to know that people want to use it?

[ai]

I think feedback depends on ideas, not on author. Many experts are bad in some questions. Many unknown person are good 😄

[yepninja]

Agreed with you, so that is why I asked this question. Let's discuss!

[yepninja]

@ai Please, notify me about the tweet. I would like to join the discussion 😀

[ai]

Asked https://twitter.com/Autoprefixer/status/992210938441928704

Let’s wait few days and then I will accept and release it.

[jhpratt]

What happens in this example?

body {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 1fr 1fr;
}
div {
  grid-row: span 2;
}

Due to the nature of selectors, the behavior of div would change. If it were a direct child of body, it would have to be span 3, as you need to account for the new "row" (the gap). If it's not a direct child, it would have to stay span 2. I suppose you could add another selector for direct childs, but something about that just feels off. Without knowledge of the DOM, this could be quite tricky.

As @ai pointed out on Twitter, grid-template-areas would avoid this. The only problem is not everyone uses that.

[yepninja]

@jhpratt Actually, your example mostly isn't related to PR.

I want to note that it's required grid-template-areas (!), grid-template-rows and grid-template-columns in the same rule to implement grid-gap. In the other cases, grid-gap is skipped as before https://twitter.com/PetukhovYevgeny/status/992280342932291584

So in your example, grid-gap will be skipped, and in IE there will not be gutters at all.

body {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 1fr 1fr;
}
div {
  grid-row: 1 / span 2; // it's need to specify start
}

/* output */
body {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
}
div {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
}

[petamoriken]

Sorry for my interrupt, grid-row-gap, grid-column-gap, and grid-gap has merged with the prefix (grid-) less properties. Please resolve this as well. 😅
https://drafts.csswg.org/css-grid/#change-2016-grid-gap
https://drafts.csswg.org/css-align-3/#gap-legacy

[ai]

@petamoriken use postcss-preset-env. It is PostCSS plugins preset with many polyfills. Including gap → grid-gap https://github.com/jonathantneal/postcss-gap-properties

Just set it before Autoprefixer

[ai]

Released in 8.5