autoprefixer: grid-row-span and grid-column-span not being prefixed by autoprefixer

I have this SCSS mixin which creates css rules:

$columns: 12;
$rows: 12;

@mixin colspan-x {
    @for $i from 1 through $columns {
      .colspan#{$i} { grid-column-span: $i; }
    }
  }

  @mixin rowspan-x {
    @for $i from 1 through $rows {
      .rowspan#{$i} { grid-row-span: $i; }
    }
  }

@include colspan-x;
@include rowspan-x;

This creates

.colspan1 {
  grid-column-span: 1;
}

.colspan2 {
  grid-column-span: 2;
}

.colspan3 {
  grid-column-span: 3;
}

.colspan4 {
  grid-column-span: 4;
}

.colspan5 {
  grid-column-span: 5;
}

.colspan6 {
  grid-column-span: 6;
}

.colspan7 {
  grid-column-span: 7;
}

.colspan8 {
  grid-column-span: 8;
}

.colspan9 {
  grid-column-span: 9;
}

.colspan10 {
  grid-column-span: 10;
}

.colspan11 {
  grid-column-span: 11;
}

.colspan12 {
  grid-column-span: 12;
}

.rowspan1 {
  grid-row-span: 1;
}

.rowspan2 {
  grid-row-span: 2;
}

.rowspan3 {
  grid-row-span: 3;
}

.rowspan4 {
  grid-row-span: 4;
}

.rowspan5 {
  grid-row-span: 5;
}

.rowspan6 {
  grid-row-span: 6;
}

.rowspan7 {
  grid-row-span: 7;
}

.rowspan8 {
  grid-row-span: 8;
}

.rowspan9 {
  grid-row-span: 9;
}

.rowspan10 {
  grid-row-span: 10;
}

.rowspan11 {
  grid-row-span: 11;
}

.rowspan12 {
  grid-row-span: 12;
}

If I put this through autoprefixer (grid: true) the output stays identical, no -ms-grid-column-span and -ms-grid-row-span properties are being added. Other properties like grid-column and grid-row are properly prefixed.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 113 (59 by maintainers)

Most upvoted comments

Go with the IE version and auto prefixer.

I’ve got a three part series coming out in just 2 or 3 weeks that will teach you everything you need to know about using css-grid safely in IE.

The issue you are facing is that you are not specifying a start column or an end column. You can’t just specify a span and leave it at that for Autoprefixer to work.

Here is the bit in the article about spanning multiple cells:


Autoprefixer has limited column and row spanning support

There is only one way to span multiple cells in IE. You need to define two things, a starting cell, and how many other cells you would like to span.

.grid-cell {
  -ms-grid-column: 1; /* starting cell */
  -ms-grid-column-span: 2; /* number of cells to span */
}

In modern browsers, you have access to far more options.

Autoprefixer friendly

Out of the modern ways to span multiple cells, Autoprefixer fully supports the following. Feel free to use any of these methods as much as you like:

Specify a starting line and the number of lines to span (similar to IE):

.grid-cell {
  grid-column: 1 / span 2;
}

Specify an end line and then span backwards:

.grid-cell {
  grid-column: span 2 / 3;
}

Specify a starting line and an end line directly:

.grid-cell {
  grid-column: 1 / 3;
}

Autoprefixer unfriendly. Here be dragons!

Now this is where Autoprefixer reaches its limit. The following methods are supported in modern browsers but are not supported by Autoprefixer. This is mainly due to Autoprefixer having no idea what grid the grid cell belongs to. For the last one, it is really only useful if you have access to auto-placement which is not something that IE supports.

Specify a starting line and how many lines from the end of the explicit grid to span:

.grid-cell {
  grid-column: 1 / -1;
}
/* also works in reverse */
.grid-cell {
  grid-column: -1 / 1;
}

Specify both the start and end line from the end of the explicit grid:

.grid-cell {
  grid-column: -3 / -1;
}

Specify only how many lines to span:

.grid-cell {
  grid-column: span 2;
}

So basically avoid using negative integers and don’t use purely just a span and you will be fine 😃

@Dan503 can you open a new issue? We will prevent -ms- prefix and will show warning.

I’m using $columns in two more mixins - so I don’t see much of an improvement there. It would lead to

@include col-x($columns);
@include grid($columns);
@include colspan-x($columns);

@ai (Sorry about all the spam)

Well, then I get it. I like your approach alot because it would even allow us to stay on the currently generated HTML!

@franktopel you must set grid: true option. So you must create postcss.config.js (in the same dir, where you put a.css):

module.exports = {
  plugins: [
    require('autoprefixer')({ grid: true })
  ]
}