W3C home > Mailing lists > Public > www-style@w3.org > March 2015

[css-grid] Containing block for abs.pos. grid items when the grid overflows

From: Mats Palmgren <mats@mozilla.com>
Date: Wed, 25 Mar 2015 14:49:01 +0000
To: "www-style@w3.org" <www-style@w3.org>
message-id: <5512CADD.3040309@mozilla.com>

Can someone clarify how to calculate the containing block (CB)
for an abs.pos. grid item that has "grid-column: 2 / auto"
when line 2 is outside padding-area (on the right side)?
I can't find anything in the Grid spec that defines this case.
(example included below)

I think it's reasonable to honor the given start line
position and clamp the CB's width to zero, so that's what
I've implemented.  (This also seems to be what Chrome Canary
currently implements, fwiw.)

I suspect the same problem can also occur (mirrored) on the
left side for "grid-column: auto / 1" (and using
"justify-content:end" or something like that to push line 1
outside (to the left of) the padding area).  It seems
reasonable to keep the end line position and clamp the CB's
width in this case too - for symmetry. (ditto for grid-row)


.grid {
   display: grid;
   position: relative;
   border: dashed blue;
   grid-template-columns: 100px;
   grid-template-rows:    100px;
   padding-left: 10px;
   width:  0;
   height: 100px;

.a {
   grid-column:  2 / auto;
   position: absolute;
   left:0; right:0; top:0; bottom:0;
   background: red;

<div class="grid">
<span class="a">a</span>
Received on Wednesday, 25 March 2015 14:49:45 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:52 UTC