[css-grid-1] Flex like control over grid items

[lassediercks]

I'm referring to the grid-column shorthand.

---

I tried to implement a grid where the children adapt to the size of the container.

At one point I expected a grid item to behave similar to what we know from the the flex-grow property.

Test case: https://codepen.io/lassediercks/pen/XRZbBo

Above 935px the grid looks fine,
Belove 935px I expect the .aside div to flow to the next line

---

The purpose of this issue is a proposal to add a behaviour similar to flex:

When our container looks like this

.container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

and a grid-item like this

.item{
   grid-column-flex: 2;
}

We can expect .item to have the width of 2*minmax(250px, 1fr)

[lassediercks]

As this is my first issue in this repository, please let me know if I should provide additional information to elaborate the proposal

[mrego]

You can use grid-column: span 2; for that. Isn't that enough?

BTW, flex-grow from Flexbox is somehow similar to fr in Grid. So things like flex: 2; could be similar to a column with 2fr.

[lassediercks]

Thanks for the comment @mrego

As grid-column: span 2; is absolute it would not solve the case what happens when auto-fill results in 2.

What I believe is, that a grid-column-flex property can achieve this grid without media queries

BTW, flex-grow from Flexbox is somehow similar to fr

Totally, and if I could assign fr to a item, that would do the trick.

.item{
   grid-column: 2fr;
}

[tabatkins]

As far as I can tell, @mrego solved your problem properly. If you want the item to be the size of two columns, you just give it a span of 2.

If you want the aside to move down to the next line when it's small enough, you need to use a media query to change the layout of the grid and/or the position of the items.

[lassediercks]

@tabatkins I totally agree, a media query would do the trick.

What I'm proposing is a way to solve the problem without a media query.

If this is something, css-grid isn't designed for I'm happy to close the proposal.

[tabatkins]

Your desired grid in the previous comment changes quite a bit - some cells switch from being one column wide to two columns wide, "Activity" switches from two rows tall to one row tall, etc. That's some pretty non-trivial changes; I don't think it can reasonably be automatically handled. Even if you did produce something that happened to cleanly work, there's a lot of nearly-adjacent possibilities that won't, so it'll probably turn out fairly fragile. :(

Really, one of the great values of Grid is how easy it is to dramatically rearrange the grid in a MQ, to accommodate different amounts of space. This allows a lot of interesting possibilities that can't be cleanly expressed in a single reactive description. This really is just "use Media Queries". ^_^