Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-grid-2] Ability for grid items to automatically span rows and columns based on content size #1373
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
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.
referenced this issue
Jul 28, 2017
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
Either way it'd be a fundamentally different layout model, even if we do end up re-using some of the Grid syntax.
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.
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 The problem is that the width of columns depends on what is inside them even if you specify them to be