grid layout negative row-end bug

• Component: CSS
• Status: RESOLVED INVALID

[Raphael]

grid layout negative values seems to bug when applied on grid-row

grid-row-start: 1;  grid-row-end: -1; should span item between first and last line, but it doesn't.

try negative value on grid-row-end ... breaks grid

see: 
http://codepen.io/raphaelgoetter/pen/aWEKwM?editors=1100

[Sergio Villar Senin]

This is not a bug, as grid is behaving as it should according to the grid placement algorithm described in the specs https://drafts.csswg.org/css-grid/#auto-placement-algo.

The reason is a bit technical but I'll try to explain why. The problem of the "broken" grid is the "aside" item which has a specified grid-row: 2/-2. That item is the only one with a definite position, both grid-row and grid-column are specified and do not require automatic placement (the other items only specify grid-column). This means that the "aside" grid item will be the first one to be placed. 

At the very begining the grid has 2 columns but no rows (grid-template-rows:auto). So in order to place that item we create 1 row. That row defines rows 1 and 2, which at the same time represent rows -2 and -1. At that moment we can place the item because we have indexes 2 and -2 which correspond to rows 2 and 1. In those cases, when start > end the specs mandate to exchange those indexes so the item is placed between 1 and 2 in the first row.

Once that item is inserted then we proceed to add the other ones which will create new rows as required.

It's true that you could use both positive or negative indexes but as you can see they are not totally equivalent when you need to automatically create new tracks. In this case if you know that you need 5 columns, just add grid-template-rows: repeat(5, auto) and you'd get the results you want.

[Sergio Villar Senin]

(In reply to Sergio Villar Senin from comment #1)
> It's true that you could use both positive or negative indexes but as you
> can see they are not totally equivalent when you need to automatically
> create new tracks. In this case if you know that you need 5 columns, just
> add grid-template-rows: repeat(5, auto) and you'd get the results you want.

Other possibilities:

1) grid-row-end: 5;

2) grid-row-end: span 3;

[Sergio Villar Senin]

(In reply to Sergio Villar Senin from comment #1)

> At the very begining the grid has 2 columns but no rows
> (grid-template-rows:auto). So in order to place that item we create 1 row.
> That row defines rows 1 and 2, which at the same time represent rows -2 and

...defines row *lines* 1 and 2, which at the same time represent row *lines* -2 and -1

> -1. At that moment we can place the item because we have indexes 2 and -2
> which correspond to rows 2 and 1. In those cases, when start > end the specs

...correspond to row *lines* 2 and 1.

> mandate to exchange those indexes so the item is placed between 1 and 2 in
> the first row.

[Raphael]

Thank you very much for those explanations.

My goal was to find a solution which works *with any number* of articles. But:

- Negative lines (grid-row-end: -2;) doesn't work on implicit rows, as you explained me
- grid-row: span X needs to know the number of lines to span
- If I switch to grid-template-areas, all the articles will overlap instead of stacking.
- I would like to avoid nested containers

Seems trickier as I thought :)

[Manuel Rego Casasnovas]

There's a issue on CSS WG GitHub that is somehow related to this:
https://github.com/w3c/csswg-drafts/issues/388

Also some old discussions on www-style about this:
https://lists.w3.org/Archives/Public/www-style/2015Jul/0133.html

The summary is that something like this won't be supported on Grid Layout now,
but maybe future levels of the spec could add support for this requirement.