Re: [css-grid] Sizing of grid item elements

Thanks for the feedback, Tab.


> > Shouldn't that mean that the default case actually is what I expect it to
> > be, i.e. that the item stretches to fill its grid area vertically? If
> not,
> > since the grid item is obviously bounded by the grid lines: what is then
> > being stretched by default?
>
> This appears to be a Chrome bug.  It struck me too, just recently,
> when I tried to use it.  I suggest reporting it so it can be fixed.
>

Cool - already in touch with some of the guys implementing in Chrome and
WebKit - it seems the alignment stuff isn't done yet, so it defaults to
"start" for now.
I hade mistakenly noted that the IE implementation does the same thing (it
doesn't).


> > The second thing that struck me as counter-intuitive is that columns
> sized
> > with percentages on a grid container without an explicitly declared width
> > won't get sizes according to a percentage of the grid container width,
> but
> > compute to "auto" width. In my example, I used the <body> element as the
> > grid container, and wanted empty "spacer" columns on the side of the
> actual
> > contents, but they collapsed (to nothing, as they had no items/content).
> I
> > had to set "width: 100%" on the <body> element for them to get rendered,
> > which felt superflous.
>
> I suspect another bug.  Percentages generally are able to resolve
> against a "fill" width on blocks; there's no good reason they
> shouldn't work as you expect here.  (In some cases they can't resolve,
> when the size of the element depends on the size of the content, but
> that's not the case for widths in "block" contexts by default.)
>

Good to know, I'll make sure to file that one.


>
> > Somewhat in the same vein, I tried to achieve a "sticky footer" effect by
> > declaring a min-height of 100vh on the <body> element (my grid
> container),
> > and setting the main row of content to "minmax(1fr, max-content)"; that
> too
> > failed: the grid inside the body element shrunk as the 1fr computed to
> > "auto", and only worked  when I set an explicit "height: 100%" on the
> > container (<body>). (Using the same general idea with a flexbox column
> and
> > the main content box with "flex: 1" works with only min-height, for
> > example.)
>
> That's intentional - fr units only work in the "max" side of a
> minmax().  This is a consequence of the grid layout algorithm.
>
> In similar flexbox layouts, you also have to set a "height: 100%;" on
> the <html> and <body> elements.
>

Oh, I didn't know that about the flexbox "sticky footer". min-height: 100vh
works in Chrome, WebKit and Firefox but not IE, (which has some bugs with
column flexboxes, it seems) and, strangely, Opera on Blink.

Thanks again!

//emil

Received on Friday, 22 August 2014 15:09:45 UTC