[css-grid-2] Ability for grid items to automatically span rows and columns based on content size

[rachelandrew]

This has been asked by authors a number of times, both during in-person conversations and online. Linked are a couple of these requests and use cases.

Authors want items to automatically span based on content size, rather than needing to make that decision and add a span as grid-column-end or grid-row-end.

Rows: when the content of the item is taller than the available space in a fixed height row, span to the next row line.

Columns: when the content of the item is wider than the width of a fixed size track, span to the next column line.

The linked issues are from my AMA, and contain examples and use cases.

• Automatic spanning of rows to create vertical rythm rachelandrew/cssgrid-ama#80
• Dynamically flowing grid items based on available space rachelandrew/cssgrid-ama#70

[tabatkins]

There's a strongly circular aspect here, given that track sizing can depend on content size.

However, there might be room to restrict a grid to only fixed-size tracks, and then this sort of thing could work.

[fantasai]

This was considered during the initial design discussions, and rejected for this layout module due the circularity concerns Tab cites here. The original Line Grid proposal’s box-snap property was designed with this idea in mind, though -- with the idea that at some future point it could be extended to snap to named grid lines, not just line grid lines.

Either way it'd be a fundamentally different layout model, even if we do end up re-using some of the Grid syntax.

[rachelandrew]

This issue keeps coming up in discussions with authors. Especially once they realise they can size the tracks with the content sizing keywords, it seems the next logical leap is that the content should be able to dictate the span.

I understand the circular issue however, but it seems like there are enough use cases for this that it would be interesting to think around how this might look.

[philipschm1tt]

I want to add a further use case for this issue.

I am working on a classic e-commerce category page – a simple grid of products and some navigation elements at the top. This should be a prime candidate for CSS Grid.

In the top left corner of the category page, we show the category tree in a box. While most sites dedicate a full column to the category navigation, we also show products below the navigation box. The height of the navigation box varies – you can go deeper in the category tree and you may see all the different types of dresses, which add to the height of the box.

At the moment we use a float-based layout to accomplish this.

[juliusstoerrle]

if this is only allowed on fixed track/row sizes, is there still an issue with circular dependencies?

[FremyCompany]

@juliusstoerrle The problem is that the width of columns depends on what is inside them even if you specify them to be 1fr so it would be really difficult to make this useful. You would need both the width and the height of the spanned track to be pixels, at which point you might almost use position:absolute to achieve your layout.

[xlf1024]

Another Use Case: Layouts like tumblr's feed (https://www.tumblr.com/explore/trending). They currently use js and absolute positioning.

How I imagine it to work in Grid: https://jsfiddle.net/_xlf/70nckeuj/ , what the Javascript does is basically grid-row: span auto

[sgwilym]

I've tried to find this feature nearly every time I've used CSS Grids. I'd like to achieve rhythm over many rows of content where each row has a indefinite amount of content (e.g. paragraphs of different lengths, pictures of different heights). Given that so many websites have dynamic content a feature like this would be a wonderful addition to CSS Grid.

It's hard for me to imagine a scenario where I'd want to use this in combination with content-size defined tracks, so @tabatkins suggestion of limiting this feature to tracks of fixed size seems very reasonable.

[lukewhitmore]

I've managed to achieve this by:

• lining up my grid item, using CSS Grids;
• providing a 'position: relative' on the same item to reset origin
• ... then providing a 'position: absolute' an an inner direct descendent container, to allow the contents to break out of the constraints set by the grid.

It works well for my use-case. YMMV.

[zakjan]

@lukewhitmore interesting, could you provide sample code? thanks!