[css-grid] Sizing of grid item elements

(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?

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.

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

Are these things, that I find counter-intuitive, products of
incorrect/incomplete implementations of the spec, or is this intended (and
perhaps confusing) behavior?

Kind regards,
Emil
thatemil.com
@thatemil

Received on Wednesday, 20 August 2014 07:02:07 UTC