Re: [css-d] Flex item inside css grid

[Tom Livingston]

Thanks Philippe. I'll dig in to this.



On Mon, Jul 24, 2017 at 7:59 PM Philippe Wittenbergh  wrote:

>
> > On Jul 24, 2017, at 10:57 PM, Tom Livingston  wrote:
> >
> > I'm still new to grid (and flex, for that matter). I have a sample
> > page where an individual flex item squeezes responsively as I want,
> > but when it is inside a css grid container, it stops.
> >
> > https://tomliv.com/flex-in-grid/
> >
> > Why do they not squeeze up inside the grid?
>
> The `display: flex` inside the grid has little or nothing to do with your
> problem.
>
> As an experiment:
> .portfoliocard-wrapper > * { border: 2px dotted red; } /* makes the
> grid-items fully visible */
> .portfoliocard-wrapper img { width: 200px; }
> .portfoliocard { background: yellow; }
>
> Now look at your page, resize your window…
>
> As far as I can see, you put NO constrain on your grid-items. They will
> grow to accommodate their contents (the width of which is ultimately
> controlled by the intrinsic width of the image).
> The important thing in this case is this:
> https://drafts.csswg.org/css-grid/#min-size-auto
>
> What that says is: The `min-width` of a grid-item is auto (and auto !=0) -
> unless the overflow property on the grid-item is set to something else than
> `visible` (the initial value). That is the same for flex-items, btw.
>
> Some options to fix your layout:
>
> [*] img { width: 100%; /* OR max-width: 100%*/  }
> [*] .portfoliocard-wrapper > * { overflow: hidden; } /* but Safari 10 has
> a bug here */
> [*] .portfoliocard-wrapper > * { min-width: 0; } /* Safari 10 does not
> resize the image. Firefox 54 does, not sure which one is correct */
>
> My preferred option is the first one.
>
>
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
>
>
>
>
>
>
> --

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex item inside css grid

[Philippe Wittenbergh]

> On Jul 24, 2017, at 10:57 PM, Tom Livingston  wrote:
> 
> I'm still new to grid (and flex, for that matter). I have a sample
> page where an individual flex item squeezes responsively as I want,
> but when it is inside a css grid container, it stops.
> 
> https://tomliv.com/flex-in-grid/
> 
> Why do they not squeeze up inside the grid?

The `display: flex` inside the grid has little or nothing to do with your 
problem.

As an experiment:
.portfoliocard-wrapper > * { border: 2px dotted red; } /* makes the grid-items 
fully visible */
.portfoliocard-wrapper img { width: 200px; }
.portfoliocard { background: yellow; }

Now look at your page, resize your window…

As far as I can see, you put NO constrain on your grid-items. They will grow to 
accommodate their contents (the width of which is ultimately controlled by the 
intrinsic width of the image).
The important thing in this case is this:
https://drafts.csswg.org/css-grid/#min-size-auto

What that says is: The `min-width` of a grid-item is auto (and auto !=0) - 
unless the overflow property on the grid-item is set to something else than 
`visible` (the initial value). That is the same for flex-items, btw.

Some options to fix your layout:

[*] img { width: 100%; /* OR max-width: 100%*/  }
[*] .portfoliocard-wrapper > * { overflow: hidden; } /* but Safari 10 has a bug 
here */
[*] .portfoliocard-wrapper > * { min-width: 0; } /* Safari 10 does not resize 
the image. Firefox 54 does, not sure which one is correct */

My preferred option is the first one.


Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Flex item inside css grid

[Tom Livingston]

Listers,

I'm still new to grid (and flex, for that matter). I have a sample
page where an individual flex item squeezes responsively as I want,
but when it is inside a css grid container, it stops.

https://tomliv.com/flex-in-grid/

Why do they not squeeze up inside the grid?

TIA


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/