Skip to content
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 · 28 comments
Labels
css-grid-3 Masonry Layout

Comments

@rachelandrew
Copy link
Contributor

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.

@rachelandrew rachelandrew added the css-grid-2 Subgrid; Current Work label May 15, 2017
@tabatkins
Copy link
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.

@fantasai
Copy link
Collaborator

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
Copy link
Contributor Author

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
Copy link

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
Copy link

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

@FremyCompany
Copy link
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.

@xlf1024
Copy link

xlf1024 commented Oct 26, 2018

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
Copy link

sgwilym commented Feb 26, 2019

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
Copy link

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
Copy link

zakjan commented Apr 2, 2019

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

@mrego
Copy link
Member

mrego commented Apr 5, 2019

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

I believe this is the same than issue #945 about masonry layouts.

@ajkandy
Copy link

ajkandy commented Jun 14, 2019

I'd like to add another vote for this kind of feature.

I have uses cases where, to either avoid or minimize text overflow, I'd want grid items to auto-snap their size to the next column or row boundary, if the other dimension is constrained by an explicit or max value. Oversize items that start at the end of the grid axis (last cell) would simply wrap to start on the next column or row.

Would this maybe be an extension to the overflow spec combined with Grid?
For instance: overflow: next-column | next-row | minmax(next-column, row-end) or would we need to separate this as grid-overflow?

Could you have a combination of of this behaviour that, if it expands up to a maximum, will then obey a second, standard overflow behaviour? I.e:

grid-overflow-rows: 3, ellipsis;

would overflow the cell to a maximum of 3 rows, and at that point, if the text is still too long, truncate it with an ellipsis.

The next question I'd have is specificity. If I added it to a top-level Grid container element, would it automatically detect overflows in contained divs?

If I applied it to a lower-level div, could I expect it to communicate its overflow state upwards to the grid container, etc?

(And obviously, implications for subgrid etc.)

@Dan503
Copy link

Dan503 commented Jan 6, 2020

Couldn't the circularity issue be solved by ignoring the specific grid cells that are set to auto-span?

Use case

For example in this use case the height has been set explicitly:
#1373 (comment)
However in my experience, any time you have something with text in it, it is an absolutly terrible idea to set an explicit height on it.

So we want the grid in general to still be able to auto-size rows in that example.

Solution

If we want a grid-cell to auto-span, then we typically do not want it to auto-size the rest of that column/row. So if a grid cell is set to auto-span, its size should be ignored when determining the size of the overall column/row.

There is one major exception, if all of the grid cells in a row/column are set to auto-span, and thus none are contributing to column/row size, then we end up with grid columns/rows that are 0px in size which breaks the layout.

To avoid this problem, auto-span should only contribute to the row/column size if it is the smallest item in that row/column. Otherwise it spans across to the next column/row instead of increasing the size of that column/row.

I'm pretty sure this solves the circularity problem of having auto size grid cells that also auto-span.

@Dan503
Copy link

Dan503 commented Jan 6, 2020

Oh one other thing. If the grid item that is set to auto-span is the last item in that column/row and that grid item is the largest item in that column/row, it should increase the size of the column/row instead of spanning to the next column/row.

If the grid item spanned to the next column/row instead of re-sizing, you would end up with an ugly overhang that doesn't line up with the edges of the rest of the grid.

@Dan503
Copy link

Dan503 commented Jan 11, 2020

I've put together this Code Pen visualising how I would expect the logic behind auto-spanning to work:

https://codepen.io/daniel-tonon/pen/ZEYrMQR

The key points in the Code Pen are:

  • Proposed syntax:
    • Span forwards: grid-[row/column]: span auto;
    • Also span forwards: grid-[row/column]-end: span auto;
    • Span backwards: grid-[row/column]-start: span auto;
    • Span both forwards and backwards: grid-[row/column]: span auto / span auto;
  • The auto-placement algorithm can place auto-span grid cells onto new rows/columns if it needs to.
  • Auto-span cells generally should not be able to generating new rows/columns through spanning. Only non-autospan grid cells can generate new rows/columns through spanning.
  • If there are no valid rows/columns left that can be spanned, the auto-span grid cell starts growing in size instead. This in turn increases the size of the columns/rows that it is spanning.
  • If a grid cell is set to span both columns and rows automatically, it spans columns first in an rtl or ltr language and rows first in an inline top to bottom language. When it reaches it's column limit (ltr language) then it starts spanning rows.
  • If a grid cell is set to span both backwards and forwards, it will span forwards first until it can't span forwards any further then it will span backwards (this needs more discussion, I'm not sure if this is the best method)

I also proposed non-preferred options for auto-spanning if the idea of auto-span cells not being capable of generating new rows/columns through spanning isn't feasible:

  • non-preferred row span limit: It stops spanning rows when it is the only cell applying height to a row.
  • non-preferred column span limit: It stops spanning columns at the end of the explicit grid.

@Dan503
Copy link

Dan503 commented Jan 11, 2020

Oh actually I also like @ajkandy idea of being able to restrict a minimum and maximum span size. I would imagine the syntax to look like this though:

.minmax-span {
  /* Based on the size of the grid cell content, it can span between 1 and 3 columns */
  grid-column: span minmax(1, 3);
}

@MatsPalmgren
Copy link

I think some of these designs might be possible to do with masonry layout (#4650) together with block-step-size.

@Dan503
Copy link

Dan503 commented Jan 15, 2020

Oh, I've had another idea.

If the auto spanning explained in this comment is possible:
#1373 (comment)

Setting height: 100% on a grid-row: span auto; cell and setting width: 100% on a grid-column: span auto; cell would be a way to force a grid cell to span to the end of the grid, including implicit grid cells. 😁

...I realise that doesn't really work though if the user tries to do both at once 🤔

@Dan503
Copy link

Dan503 commented Jan 20, 2020

I think some of these designs might be possible to do with masonry layout (#4650) together with block-step-size.

@MatsPalmgren #1373 (comment)

That would be a very hacky solution though for creating a single auto-spanning grid cell. It wouldn't convey the authors intent.

It's much better to have a clear way to create auto-spanning grid cells.

@dragon-architect
Copy link

I logged in for the first time in forever SPECIFICALLY to comment on this issue and throw my voice into the ring. Tonight I needed similar (although not quite identical) functionality whilst working on the home page rebuild of my own website, and I had to use an inelegant javascript hack to make something like this work.

CSS grid definitely needs auto-spanning, and I think making it work only when a fixed grid is explicitly defined in both dimensions would be an acceptable solution to the circular logic problem others have raised concerns about.

@krsfryr
Copy link

krsfryr commented Aug 5, 2020

Running into the same issue. Definitely need a way to auto-span.

@Akiyamka
Copy link

Akiyamka commented Nov 7, 2021

auto-span must have, it will be game changer feature into apps with layout

@trondhuso
Copy link

trondhuso commented Jan 31, 2022

As I had a client who wanted to show her clients in a grid I had to use the grid-template-areas. It wasn't a perfect match, but as close it it could be. The first cell had a lot of text in it, and thus I sort of created a sidebar.
It ended up something like the table below where I, btw, have used rowspan to create the desired output...

`

content 1 content 2 content 3
content 4 content 5
content 6 content 7
content 8 content 9
`

@tayfunerbilen

This comment was marked as spam.

@Aurailus
Copy link

Aurailus commented Nov 7, 2022

This feature would be super useful to me!

@marzieh-kazemi
Copy link

This feature would be super useful, please give us an update if it'S as part of your roadmap!

@jandre3000
Copy link

This feature would be very beneficial for multilingual sites where content width can vary dramatically based on language. In Wikipedia's new design for example, the table of contents is located in a separate column beside the content. In some languages it tends to be very narrow (e.g.Japanese) and in others it's very long (e.g. German) but we have to allocate the same amount of space in both situations.

Note the gap between table of contents & content column in the articles below.

Screenshot of wide table of contents on English wikipedia
Screenshot of narrow table of contents on Japanese wikipedia

@curiousduck-dev
Copy link

Adding my two cents here to agree with others that this would be a great addition to grid. My use case is this sort of masonry layout. Setting a relatively small static grid-auto-rows (say, 60px) to allow for that broken-grid look and then letting each item span as many rows as it needs to based on the length of the content would give this layout all kinds of dynamic goodness.

Screenshot 2023-10-20 at 12 08 09

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-grid-3 Masonry Layout
Projects
None yet
Development

No branches or pull requests