Autoprefixer: Add support for grid-gap

[pcjmfranken]

The grid-column-gap, grid-row-gap and their shorthand grid-gap (spec) allow you to set gutters on the inside of the grid.

It would be nice if this property could be transformed as well, perhaps by automatically adding empty columns/rows in between the provided tracks with a size of whatever is provided by the grid-gap property.

[ai]

@pcjmfranken Do you know any -ms- property or another way to emulate grid-gap on IE?

[pcjmfranken]

There is no -ms- prefix. In order to achieve this transformation, autoprefixer will have to remove the user-provided grid-gap properties and place empty grid tracks between all cells.

Codepen example here (found on this page).

[ai]

Oh. It looks like too complex. I am not sure that I will be able to find somebody to do this work.

What about using padding and don't use grid-gap?

[pcjmfranken]

It is indeed a bit complex and your alternative solution works.

It would be a nice addition to autoprefixer's css-grid support if someone can find the time to implement this, but it's a feature we can absolutely live without.

[ai]

Close since there was no ideas about how to make polyfill

[PascalAOMS]

Too bad since the example shown by @pcjmfranken looks really promising.

[yepninja]

I've been working on grid-gap. It can be implemented when all these properties are used: grid-template-areas, grid-template-columns, grid-template-rows, grid-gap.
Now it's the only case when we know in advance all cells of the grid, and so can position correctly all cells taking into account gutters.

[yepninja]

@ai I think it's time to reopen this issue for a while.

[PascalAOMS]

Why is the way of adding more -ms-grid-columns in the size of the given grid-gap no option?

Why would we need grid-template-areas?

[yepninja]

The problem is that we don't know the structure of the HTML code, so don't know which cell belongs to which grid. The only way, we can recognize this belonging, is grid-template-areas with grid-area.

[madeleineostoja]

🎉

@evgeny-petukhov does your shim take into account only setting grid-collumn-gap (and therefore only grid-template-columns)?

That's a common use-case IMO, especially for the old standard X-col full page grid. Assume it would just be a subset of the logic you're using to shim both row and column gaps?

[yepninja]

grid-row-gap works the same as grid-column-gap

[madeleineostoja]

Nice! So this would be shimmed properly (ie: not including rows and areas)?

.foo {
  display: grid;
  grid-template-columns: ...
  grid-column-gap: ...

[yepninja]

It's simpler to explain the logic of errors. Look at this code about rows and rows' gap (the same for columns):

if (!hasRows && (hasBothGaps || gap.row && !gap.column)) {
    delete gap.row;
    decl.warn(result, getMassage('rows'));
}

hasRows - has grid-template-rows
gap - gaps sizes { row: '10px', column: '1rem' } or only one gap { row: '10px' }
hasBothGaps - both gaps are used gap.row && gap.column

[Dan503]

Interesting, I love the idea :)

If you are building a grid with IE support then you are probably going to be using all three of those required properties anyway. That's how I tend to build my IE grids right now.

I have to write code like this at the moment:

css .grid { display: grid; grid-template: "top-left .. top-right" auto "........... .. ..........." 10px "bottom-left .. bottom-right" auto / 1fr 10px 1fr; }

If this was implemented then I could write my code like this instead which is _much_ nicer :)

css .grid { display: grid; grid-gap: 10px; grid-template: "top-left top-right" "bottom-left bottom-right" / 1fr 1fr; }

One of the most common issues I run into at the moment is that I forget to swap out the the gap for the area name when an area spans multiple cells. eg I'll do this which causes invalid css

css .grid { display: grid; grid-template: "row-span .. top-right" auto "........ .. ..........." 10px "row-span .. bottom-right" auto / 1fr 10px 1fr; }

The valid version is this:

css .grid { display: grid; grid-template: "row-span .. top-right" auto "row-span .. ..........." 10px "row-span .. bottom-right" auto / 1fr 10px 1fr; }

That won't be an issue any more if this is implemented :)

[Dan503]

@evgeny-petukhov

It can be implemented when all these properties are used: grid-template-areas, grid-template-columns, grid-template-rows, grid-gap.

Do all of those properties _really_ need to be defined?

The only way, we can recognize this belonging, is grid-template-areas with grid-area.

I think the only property that _really_ needs to be defined is grid-template-areas. The areas tell autoprefixer where the edges of the cells are.

I don't see a reason why autoprefixer can't translate the grid-gap property when used in code like this:

css .grid { display: grid; grid-gap: 10px; grid-template-areas: "a b" "c d"; } .cell-a { grid-area: "a"; } .cell-d { grid-area: "d"; }
Any columns and rows that autoprefixer hasn't been given a value for should default to auto. So the above code would translate to this:
css .grid { display: grid; grid-gap: 10px; -ms-grid-columns: auto 10px auto; -ms-grid-rows: auto 10px auto; grid-template-areas: "a b" "c d"; } .cell-a { -ms-grid-column: 1; -ms-grid-row: 1; grid-area: "a"; } .cell-d { -ms-grid-column: 3; -ms-grid-row: 3; grid-area: "d"; }
Although if autoprefixer detects that both -ms-grid-column and -ms-grid-row have a value of 1 then it can safely omit them from the output since 1 is the default value of both -ms-grid-column and -ms-grid-row.

[Dan503]

Oh actually auto works a bit differently in IE.

In IE auto strictly equals minmax(min-content, max-content).

In modern browsers auto still essentially acts like minmax(min-content, max-content) except it is able to exceed the size of the max-content value when stretched by the align-content and justify-content properties. IE doesn't allow that.

I've tried and I can't come up with a single value that will replicate the auto functionality found in modern browsers in IE. minmax(min-content, 100%) I thought would be the most likely to work but it seems to act more like minmax(min-content, 1fr).

Since a grid by default will stretch to the width of it's container, unfortunately I don't think using a default value of auto on columns in IE is going to be safe.

A default value of auto on rows on the other hand should be pretty safe though. It is a very common scenario to have a grid's height determined entirely by the height of the content inside of it. When that is the case, auto acts the same way in both IE and modern browsers. When the grids height exceeds the height of it's content, that is when auto in IE and auto in modern browsers differ.

So I think that this is the best balance between browser consistency and user convenience:
grid-gap can be used without defining template rows but both grid-template-areas and grid-template-columns _must_ be defined. If a user has not defined grid-template-rows then auto should be used as the default value for any row defined in grid-template-areas.

[ai]

OK. After I will finish my next talk preparation, I will merge it. Great work :+1:

[Dan503]

Will the merged version handle grid-template-rows in the way I suggested in my previous comment?

[ai]

@evgeny-petukhov what do you think?

[yepninja]

@Dan503 Great research, thank you a lot. I consider that default values of grid-template-rows are related not only to grid-gap, we also can safely add -ms-rows with auto for IE when only grid-template-areas are specified.
@ai I think it would be better to separate this discussion to different issues and implement features step by step.

[Dan503]

we also can safely add -ms-rows with auto for IE when only grid-template-areas are specified.

That's not necessary. IE does that for us automatically by default. There is no need to add -ms-grid-rows: auto auto auto; for example because IE _does_ have an implicit grid and all rows/columns in the implicit grid have a size of auto.

(I'm writing an article about how to use css-grid in IE at the moment so I've done a fair bit of experimenting with it)

[Dan503]

You only need to add in the rows explicitly to support grid-gap because the gaps need to be converted into actual grid rows in IE.

[yepninja]

You are right. I'm a little confused)
I'll try today to implement the logic you've described.

[Dan503]

Oh by the way, it would be better to use this syntax:

-ms-grid-rows: auto (20px auto)[2];

Rather than this syntax:
-ms-grid-rows: auto 20px auto 20px auto;
It helps keep the file size down.

(I hope I got the square and round brackets the right way around)

[yepninja]

Agreed. It's more clear. But it's not critical.
Also, we now decompose repeat, instead of using IE repeat syntax:

{
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

[Dan503]

Oh really? Why did you decide to not use the IE syntax? I thought it had identical functionality to the modern syntax? 😕

[yepninja]

Because it was easier firstly to decompose repeat syntax and than use one script to add gutter tracks.

[Dan503]

Fair enough, that makes sense. It would be good if it only decomposed the repeat syntax if it had to add gutters though. If there are no gutters then IE's repeat syntax should still be used I think.

[yepninja]

Without gutters, we transpile modern repeat syntax (repeat(3, 1fr)) to IE syntax ([1fr](3)). The exception so far only with gutters.

[yepninja]

I've updated PR. @Dan503 pealse, can you review tests?

[Dan503]

I've taken a look at the tests, they look good to me. :)

[Dan503]

Considering that pull request https://github.com/postcss/autoprefixer/pull/1032 has been merged into version 8.5, can this issue be closed now?

[ai]

Thanks, I forgot about this issue