New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rachelandrew opened this Issue May 15, 2017 · 6 comments

Comments

Projects
None yet
6 participants
@rachelandrew
Contributor

rachelandrew commented May 15, 2017

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.

@tabatkins

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins May 15, 2017

Member

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.

Member

tabatkins commented May 15, 2017

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 comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Nov 6, 2017

Contributor

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.

Contributor

fantasai commented Nov 6, 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 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 comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Nov 6, 2017

Contributor

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.

Contributor

rachelandrew commented Nov 6, 2017

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.

@maeh2k

This comment has been minimized.

Show comment
Hide comment
@maeh2k

maeh2k Feb 18, 2018

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.

category-page_navigation-box_small
category-page_navigation-box_large png

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

maeh2k commented Feb 18, 2018

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.

category-page_navigation-box_small
category-page_navigation-box_large png

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

@juliusstoerrle

This comment has been minimized.

Show comment
Hide comment
@juliusstoerrle

juliusstoerrle Mar 31, 2018

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

juliusstoerrle commented Mar 31, 2018

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

@FremyCompany

This comment has been minimized.

Show comment
Hide comment
@FremyCompany

FremyCompany Apr 3, 2018

Contributor

@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.

Contributor

FremyCompany commented Apr 3, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment