The autoprefixer spans columns and gaps instead of columns including gaps

[mruoss]

When using column-gap and column-span, the autoprefixer turns gaps into columns and spans the columns and gaps, instead of columns including gaps.

Test case:

.grid
    grid-template-rows: repeat(6, auto)
    grid-template-columns: repeat(4, 1fr)
    grid-template-areas: "tile-1 tile-2 tile-3 tile-4" "tile-5 tile-6 tile-7 tile-8" 
    column-gap: 28px

.spanning-tile
    grid-area: tile-5
    grid-column: span 2

Output:

.grid {
    -ms-grid-rows: (auto)[6];
    grid-template-rows: repeat(6,auto);
    -ms-grid-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas: "tile-1 tile-2 tile-3 tile-4" "tile-5 tile-6 tile-7 tile-8";
    -webkit-column-gap: 28px;
    column-gap: 28px;
}

.spanning-tile {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: tile-5;
    grid-column: span 2;
    -ms-grid-column-span: 2;
}

Problem: On IE, the gaps are created by defining additional columns. Hence, the -ms-grid-column-span: 2; will span the first colum and the first gap, while on other browsers, grid-column: span 2; spans the first column, the gap and the second column.

Possible solution: Turn grid-column: span $cols; into -ms-grid-column-span: 2*$cols - 1 if column-gap is defined.

[Dan503]

This is a use case for named grid lines.

https://github.com/postcss/autoprefixer/issues/1020

That issue has been on the back burner for quite a while.

My best recommendation right now is to manually write the IE prefix:

.spanning-tile
    grid-area: tile-5
    -ms-grid-column-span: 3;
    grid-column: span 2

[Dan503]

IE doesn't support grid-gap so the only way that Autoprefixer can replicate gaps is to add extra rows and columns to the grid.

[Dan503]

Do you need the overlap?

If not, the best way to handle the situation is to make the grid area span multiple columns:

.grid
    grid-template-rows: repeat(6, auto)
    grid-template-columns: repeat(4, 1fr)
    grid-template-areas:
      "tile-1 tile-2 tile-3 tile-4"
      "tile-5 tile-5 tile-6 tile-7" 
    column-gap: 28px

[mruoss]

My best recommendation right now is to manually write the IE prefix:

Hi @Dan503 and thanks for the quick response. Okay, this is exactly the workaround we used:

.spanning-tile
    // autoprefixer grid: off
    grid-column: span 2
    // autoprefixer grid: on
    -ms-grid-column-span: 3;
    grid-area: tile-5

Is it possible / are you planning to build this logic as proposed into the autoprefixer or is it a wontfix as this is gonna be solved with #1020? (in which case we can close the issue)

[mruoss]

Yeah in fact we need the overlap in our case.

[Dan503]

Don't use the on and off comments like that. They affect the whole block. The second control comment should be getting ignored.

Do this instead:

.spanning-tile
    // autoprefixer: ignore next
    grid-column: span 2
    -ms-grid-column-span: 3;
    grid-area: tile-5

It is feasable that we could support this since we know the grid cell has a gap thanks to the grid area.

@bogdan0083 how do you feel about this issue? Is it worth fixing or should people just hack around it?

[mruoss]

Oh right, thanks for the hint.

[bogdan0083]

@bogdan0083 how do you feel about this issue? Is it worth fixing or should people just hack around it?

I think it is worth fixing for sure. If it works in modern browsers then it should work in IE as well. We also need to add this functionality for grid-row.

This issue is not very easy to fix though. Now we have simple hack which adds prefixes for grid-(row/column) without taking into account grid-gap value of grid container. To fix this, we need to add prefixes for these rules inside our grid-areas algorithm to make sure it takes grid-gap into account.

I'm extremely busy these days, but I might take a look at it someday 👍

[Dan503]

Ummm... I tested this out and what you have posted doesn't seem to work in modern browsers :/

.spanning-tile {
    grid-column: span 2; /* This is ignored by modern browsers because grid-area overrides it */
    grid-area: tile-5;
}

.spanning-tile {
    grid-area: tile-5;
    grid-column: span 2; /* This places the start of the column in the wrong place */
}

The only way to make it work in a modern browser is to place the grid-column after grid-area and define both a start and end line for grid-column.

.spanning-tile {
    grid-area: tile-5;
    grid-column: 1 / span 2; /* define both the start and end line of the column */
}

I made a demo here: https://codepen.io/daniel-tonon/pen/eQePXQ

If you override the grid-column though, it makes using grid-template-areas kind of pointless. You are overriding the automatic placement functionality so if you change the grid-template-areas definition, it can't reliably move the grid cells into the correct position anymore.

[mruoss]

You're right, @Dan503. It was by chance my code resulted in the desired result. I guess, if you want to use the name of the grid area instead of the start columns, you could also define column and row separately:

.spanning-tile {
    grid-row: tile-5;
    grid-column: tile-5 / span 2; /* define start as tile-5 */
}

Added it to your demo: https://codepen.io/anon/pen/WYXqrz

However, this will not return the desired result by the autoprefixer as far as I can tell...

[Dan503]

Since Autoprefixer doesn't support named lines yet, your solution isn't an option.

[Dan503]

I think we should close this issue. The use case that was keeping this issue open isn't actually valid.

This is a use case for #1020 (named grid lines).

[Dan503]

Oh actually grid-column-end: span 2 might work. Let me try that out.

[Dan503]

It worked! 😁

https://codepen.io/daniel-tonon/pen/eQePXQ

The trick is to use grid-column-end: span 2; after the grid-area declaration.

.spanning-tile {
    grid-column-end: span 2; /* overridden by grid-area */
    grid-area: tile-5;
}

.spanning-tile {
    grid-area: tile-5;
    grid-column-end: span 2; /* works perfectly :D */
}

It even works in IE11.

[mruoss]

Yes excactly, but now we are back to the initial problem. If you add a gap, it doesn't work as desired. But my workaround from above works here, too:

.spanning-tile {
	grid-area: tile-5;
	/* autoprefixer: ignore next */
	grid-column-end: span 2;
	-ms-grid-column-span: 3;
}

[Dan503]

Yep ok, worth keeping open then.

[Dan503]

There is actually no need for the control comment. This works just fine:

.spanning-tile {
	grid-area: tile-5;
	-ms-grid-column-span: 3;
	grid-column-end: span 2;
}

https://codepen.io/daniel-tonon/pen/MzONRp

[Dan503]

Actually doing this technique produces a warning. you will still need to use /* autoprefixer: ignore next */ to prevent the warning from appearing.

[Dan503]

Using ignore next doesn't prevent the warning :(

I'll log a new issue for that.

[ai]

Can we close this issue since https://github.com/postcss/autoprefixer/pull/1159 was merged?

[Dan503]

No, that issue was just fixing the warning message as a quick fix for the issue.

This issue is about automating the process so that people don't manually have to add their own -ms- prefix if they apply this hack to a grid with gaps in it.