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

On Tue, Aug 19, 2014 at 8:34 AM, Emil Björklund
<bjorklund.emil@gmail.com> wrote:
> (first time poster—hope I'm doing this right.)
>
> In trying to understand the CSS Grid Layout specification, I came across a
> few things that struck me as counter-intuitive.
>
> First, the height of grid items. In defining rows and columns and placing
> grid items to start and end at row and column lines, I assumed that the
> element representing the grid item would be sized so that its edges coincide
> with the grid lines. To quote the spec, "By default, grid items stretch to
> fill their grid area".
>
> That doesn't quite seem to be the case with the bottom edge of the item in
> any of the implementations I've tried: the item gets sized as a normal
> block, with height according to content. In essence, I guess the grid item
> is one thing, and the actual element is another, in this interpretation.
> That can however be countered with explicitly setting the height to 100%, so
> its not unsolveable. However, when reading the spec, it seems that the
> default vertical alignment for grid items should also be "stretch".
> 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.

> 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.)

> 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.

~TJ

Received on Friday, 22 August 2014 00:50:50 UTC