Re: [css-grid] Allow referencing the last line of implicit grids

Hi Patrick,


I’m having a hard time understanding how your usecase would work in an efficient way, and react properly in edge cases. 


If you want the amount of columns to equate the amount of tabs, you’re relying on automatic placement, right? Then you cannot possibly have two rows because the items would be allowed to locate on the second row. 


Well, I guess your answer to this is that they would do but can’t because the second row is already filled with the item you placed there using “1 / -1i” (where -1i means the last implicit line). However, you’re forcing a relayout each time a new item is placed because by increasing the amount of columns, it changes the placement of positioned grid items and therefore require a new pass of the positioned-items layout, which will update the “busy-cells matrix”. Optimizations may be made but could be hard to implement. 


What’s preventing you, in this case, to use a two-rows grid whose first row is a <nav> element containing the tabs (which could be a flex-box). Using a flexbox may allow line-wrapping once dividing into columns cannot possibly work given the content min-size and is therefore much better.


Am I missing something here?

François









De : Patrick Brosset
Envoyé : ‎dimanche‎ ‎12‎ ‎juillet‎ ‎2015 ‎10‎:‎44
À : CSS WG















Hi,


I've been having a quick conversation [1] today with Manuel Rego and Tab Atkins about whether it was possible in an implicit grid (one where I didn't provide any rows and columns templates so that cells would be created automatically as needed) to make items span a whole track.

My use case is to create a tabbar widget. I thought grids would be especially useful for this in helping reduce the amount of markup and css needed.
The grid would have 2 rows, the first one would contain the tabs, and the second one the tab panel into which content would be loaded.
I want each tab to occupy exactly one cell, and I want the widget to allow adding/removing tabs dynamically, hence I don't know how many columns I'm going to have in advance, therefore the implicit grid.
I want the panel the always occupy all available columns on the second row.

It seems like the key to this would be to use "grid-column: 1 / -1;" for the panel but negative numbers apparently only count from the last explicit line, however here the grid is implicit.

Manuel made a simplified example on jsbin [2].

Do you think that use case is compelling enough to change the spec and accept spanning implicit grids too?

I don't have enough experience using grids in real-world scenarios, but it sure feels like something that should be possible.



Patrick Brosset


[1] https://twitter.com/patrickbrosset/status/619580052531978240

[2] http://jsbin.com/faxexe/1/edit?html,css,output