autoplace for IE 10/11 not work as expected when use css repeat(2, 50px 100px);

[wangzhengbo]

The following css

/* 2 rows x 2 columns */
.example {
  display: grid;
  grid-template-rows: 50px 100px;
  grid-template-columns: 50px 100px;
}

/* 2 rows x 4 columns */
.example2 {
  display: grid;
  grid-template-rows: 50px 100px;
  grid-template-columns: repeat(2, 50px 100px); /* columns are repeated */
}

will output same css:

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: ie 10
*/

/* 2 rows x 2 columns */
.example {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 50px 100px;
  grid-template-rows: 50px 100px;
  -ms-grid-columns: 50px 100px;
  grid-template-columns: 50px 100px;
}.example > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}.example > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}.example > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}.example > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

/* 2 rows x 4 columns */
.example2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 50px 100px;
  grid-template-rows: 50px 100px;
  -ms-grid-columns: (50px 100px)[2];
  grid-template-columns: repeat(2, 50px 100px);
}

.example2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.example2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.example2 > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.example2 > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

[ai]

@Dan503 can we even support repeat?`

[Dan503]

We used to support it. I know that it definitely worked in the past at some point.

Maybe it regressed when autoplacement was introduced? 😕

[Dan503]

Oh sorry, I was confused.

The repeat syntax is working, the issue is that the autoplacement is trying to place stuff in the wrong columns.

Theoretically it could be calculated as long as repeat has a fixed number of items that get output.

@wangzhengbo if you add a gap of 0px does that fix the issue?

I think it gets converted to long form when there is a gap present and that might make it render correctly.

[wangzhengbo]

Oh sorry, I was confused.

The repeat syntax is working, the issue is that the autoplacement is trying to place stuff in the wrong columns.

Theoretically it could be calculated as long as repeat has a fixed number of items that get output.

@wangzhengbo if you add a gap of 0px does that fix the issue?

I think it gets converted to long form when there is a gap present and that might make it render correctly.

Yes, autoplacement is not work as expected for repeat(2, 50px 100px). It can not fixed the issue when add a gap of 0px.