[css-grid] if area row/column span has been declared, row/column span needs to apply to all

[Dan503]

We have an issue where because a row/column span is being output into one rule but not the other, a rule is inheriting a row/column span that it is not supposed to inherit.

View this demo in IE and a modern browser for comparison:
https://s.codepen.io/daniel-tonon/debug/VExydO/vWkRwapxPvnM

Input CSS

.content {
  grid-area: content;
}

/* layout.scss */
.single-sidebar {
  display: grid;
  grid-template:
    "nav       content" 1fr
    "subscribe content" 1fr /
     1fr       2fr;
}

.double-sidebar {
  display: grid;
  grid-template:
    "nav    content   sidebar" 1fr
    "nav    subscribe sidebar" 1fr /
     1fr     2fr       1fr;
}

current output css

.content {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2; /* <-- A row span has been output */
  -ms-grid-column: 2;
  grid-area: content;
}
.double-sidebar > .content {
  -ms-grid-row: 1;
   /* <-- No row span output to overide the other one */
  -ms-grid-column: 2;
}

.single-sidebar {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 2fr;
      grid-template:
    "nav       content" 1fr
    "subscribe content" 1fr /
     1fr       2fr;
}

.double-sidebar {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 2fr 1fr;
      grid-template:
    "nav    content   sidebar" 1fr
    "nav    subscribe sidebar" 1fr /
     1fr     2fr       1fr;
}

expected output CSS

.content {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: content;
}
.double-sidebar > .content {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1; /* <-- row span is output to override the other one */
  -ms-grid-column: 2;
}

.single-sidebar {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 2fr;
      grid-template:
    "nav       content" 1fr
    "subscribe content" 1fr /
     1fr       2fr;
}

.double-sidebar {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 2fr 1fr;
      grid-template:
    "nav    content   sidebar" 1fr
    "nav    subscribe sidebar" 1fr /
     1fr     2fr       1fr;
}

The logic around this should be that if a row span is required for any property that shares the same area name, all rules that share that area name need to be given a row span value. Same goes for column span.

The demo is actually a Codepen that I'm using in my article so this is another issue that is blocking the article from being published :(

@bogdan0083, can you take a look at this one?

[bogdan0083]

I'll take a look at this one 👍

[ai]

Released in 9.3