Bug 209756 – [css-grid] If a grid template track has repeat(auto-fit, ...) as well as grid template area defined, the grid area is rendered in the wrong location

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Carlos Alberto Lopez Perez]

This bug was previously reported for Chrome at https://crbug.com/966090 (which its now fixed), but WebKit still has the same issue.

Steps to reproduce the problem?
Below there are 3 different test cases to reproduce the problem:

First:

https://test-e79a2b-96b10b0680625d539b0895ae800.webflow.io/

You can see here I defined grid-template-columns and grid-template-rows to `repeat(auto-fit, minmax(200px, auto))`, and grid-template-areas to ". Area". I placed the Heading text inside of the Area, and would expect it to appear in the second column, first row. But it does not. In Firefox, and Chrome it does.

Second:

https://codepen.io/anon/pen/zQpajp?editors=1100
Same details as above, but with this codepen you can adjust values as needed

Third:

1. Add a div element
2. Add a few block elements, with some content e.g. an H1
3. Make the div a `display: grid`
4. Give the div a `repeat(auto-fit, minmax(100px, auto))` (or any other valid value for auto-fit) on both `grid-template-columns` and `grid-template-rows`
5. Define a valid `grid-template-areas`
6. Place one of the grid child elements inside of the area

What is the expected behavior?
The grid template areas should be rendered where it is defined in the track listing, eg

- If a grid template areas was `. . content content .`, then the area should start from column line 4, end on line 6, and row line 1, end on line 2.

What went wrong?
It looks like the area is being moved at the very end of the track. See the examples in the repro steps above. Firefox and Chrome does what is expected.

[Oriol Brufau]

*** This bug has been marked as a duplicate of bug 209572 ***