Dynamically flowing grid items based on available space

[snookca]

I'd like to flow grid items based on available grid columns. repeat() using auto-fill or auto-fit create this behaviour. It will automatically create the number of grid tracks that can fit within the container. Given repeat(auto-fit, 100px) and the container is 450px wide, there will be 4 columns. If the container is 550px wide, there will be 5 columns.

The problem (if you want to call it that) is that I'd like to enable similar behaviour with explicitly defined grid tracks. If I say grid-template-columns: 100px 300px 100px, I'd like to only flow items into that third column if there's enough room within the container. Instead, from what I can tell, once a track is defined, a grid item will be put into that track regardless of whether there's room or not. (Assuming all grid items are set to span a single column.)

Thoughts?

[rachelandrew]

I'm really not clear on the problem you are trying to solve here. Can you demonstrate with some code?

[snookca]

Hopefully this explains it better: https://codepen.io/snookca/pen/PmjExO

[rachelandrew]

So you want to be able to specify a track listing that could repeat n number of times?

For example if I have available 400 pixels, and want to auto fill a pattern of 100px 200px, that would give me tracks of 100px 200px 100px (as the 100px repeats again from the listing).

If I have available 600px in the container I'd get 100px 200px 100px 200px.

Is that right? If so what is the use case for wanting that ability? What are you trying to build with it?

[snookca]

Yes, that's correct.

The intent is to allow for a responsive layout without needing to use media queries (or container queries).

An example use case: When there's enough room, the component has 1 wide and 2 narrow columns. When there isn't enough room, the content in the 3rd column flows either into the 1st or 2nd column. When the container is smaller still, the content from the 2nd column flows into the 1st.

The current home page of CNN.com actually has a good example of this. On a wider screen, there's a 3 col grid of videos. When there isn't enough room, it drops to 2 columns.

In looking at their implementation, they seem to be using an Element Query approach to this problem (as evidenced by the data-eq-state attributes).

[thundernixon]

For what it's worth, I also came to ask this question (I think so, at least – please correct me if I'm wrong, @snookca).

If I were using flexbox, I might set flex-wrap: wrap; and set a flex-basis: 200px to each card in a layout. This would allow it to reflow sensibly when a layout gets wider or narrower. An example of this, contrasted to grid, is here: https://codepen.io/thundernixon/full/PmeOJW/

Does grid have a corollary to flex-wrap and flex-basis? Or, is this a case in which flex and grid might somehow be mixed, to achieve the desired effect? Thank you for any insight!

[rachelandrew]

@thundernixon no - your example is just the basic auto-fill one https://codepen.io/rachelandrew/pen/ZKoRaK?editors=1100

See: http://gridbyexample.com/video/series-auto-fill-auto-fit/

[rachelandrew]

@snookca I think your example requires the use of media queries. I'd probably just apply the span 2 at a particular breakpoint.