W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2017

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

From: Lasse Diercks via GitHub <sysbot+gh@w3.org>
Date: Wed, 10 May 2017 09:20:55 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-227616928-1494408054-sysbot+gh@w3.org>
lassediercks has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid-1] Flex like control over grid items ==
I'm referring to [the grid-column](https://drafts.csswg.org/css-grid/#typedef-grid-row-start-grid-line) 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](https://www.w3.org/TR/css-flexbox-1/#propdef-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

```css
.container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
```
and a grid-item like this

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

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


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1344 using your GitHub account
Received on Wednesday, 10 May 2017 09:21:02 UTC

This archive was generated by hypermail 2.3.1 : Monday, 23 October 2017 10:12:53 UTC