W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

Re: [csswg-drafts] [css-grid] Static position should use content-box, not padding-box (#3020)

From: Mats Palmgren via GitHub <sysbot+gh@w3.org>
Date: Sun, 16 Dec 2018 05:51:52 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-447619647-1544939511-sysbot+gh@w3.org>
>  I see tests for self and content alignment in the case of flexboxes, but only for self alignment in the case of grid layout. Why?

I don't know, but many of our Grid tests are in a separate [folder](https://searchfox.org/mozilla-central/source/layout/reftests/css-grid/). There should be some content-alignment tests there. (We want to convert these to WPT tests and upstream them eventually. Just lack of resources that it hasn't happened yet...)

> For example, I'm wondering if for grid layout the following two examples. Should they have the same output (the abspos element should be horizontally and vertically centered)?

Note that the grid container is **not** an abs.pos. containing block in your examples, so [§9.2](https://drafts.csswg.org/css-grid/#static-position) applies. In particular:
> The static position [CSS21] of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the content edges of the grid container.

In your first example (self-alignment), css-align [says](https://drafts.csswg.org/css-align-3/#justify-abspos) "_use the box’s [static position rectangle](https://drafts.csswg.org/css-align-3/#static-position-rectangle)_", i.e. "_By default, the static position rectangle of the child of a grid container corresponds to the content edges of the grid container._", so that's what leads to the first abs.pos. being centered in the content-box.

In the second case (content-alignment), it's the grid of the grid-container that is aligned, but since the abs.pos. box isn't grid-aligned at all it's not affected by that.  If you add `position:relative` to the container the child is still not affected by content-alignment since it's not anchored to any line in the grid (given that all its lines are `auto`). If you additionally add `grid-area:1/1/1/1` to the abs.pos. item to anchor it with the top-left of the grid it's still not centered because a grid with zero tracks is [special](https://drafts.csswg.org/css-grid/#grid-align): "_If there are no grid tracks (the explicit grid is empty, and no tracks were created in the implicit grid), the sole grid line in each axis is aligned with the start edge of the grid container._". This makes sense because the [alignment subjects](https://drafts.csswg.org/css-align-3/#distribution-grid)  are the _tracks_ (not lines) and with no tracks content-distribution doesn't apply. If you add a track, e.g. `grid:0/0`, then line 1 should be centered by content-alignment and then you can use self-alignment to align the item relative to that.

So this example should display the same as your first example:
<div style="display: grid; width: 200px; height: 100px; place-content: center; place-items: center; border: solid thick; grid:0/0; position:relative">
  <div style="grid-area:1/1/1/1; position: absolute; background: magenta;">abspos</div>

GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3020#issuecomment-447619647 using your GitHub account
Received on Sunday, 16 December 2018 05:51:53 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:41 UTC