W3C home > Mailing lists > Public > www-style@w3.org > April 2016

[css-grid] Positioned items and grid lines

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Tue, 26 Apr 2016 17:19:50 +0200
To: www-style@w3.org
Message-ID: <571F8716.6060306@igalia.com>

I've been talking to Mats Palmgren in a Firefox bug [1] about the
expected behavior of positioned items in some special situations.

The first example is the one we discussed a while ago in this list [2].
But let's use a new version in this mail:
<div style="display: grid; grid: 100px / 100px 50px;
            width: 300px; padding: 0px 50px; position: relative;">
  <div style="position: absolute; grid-column: auto / 1;">item1</div>
  <div style="position: absolute; grid-column: 3 / auto;">item2</div>

IMHO, the items should be placed like this:
* item1: From 0px to 50px (left padding).
* item2: From 200px to 400px (empty part of the content box + right

However Mats doesn't agree with the position of "item2", he thinks it
should be: From 350px to 400px (right padding).
I'd like to confirm the expected behavior as this contradicts what Tab
replied to me in the old thread [3].

On top of that, I'd like to clarify what happens when we use content
alignment. For example if we set "justify-content: space-evenly;" on the
previous grid.

Again I think the items should be placed:
* item1: From 0px to 100px (left padding + distribution offset).
* item2: From 300px to 400px (distribution offset + right padding).

In this case Mats doesn't agree in any of those. He thinks that "item1"
should be from 0px to 50px (left padding) and "item2" from 350px to
400px (right padding).
It'd be nice to clarify this situation too.

The behavior I'm explaining in this mail is the one implemented by
Chromium, however Firefox follows what Mats said.
I've created an example with a few more items [4] and you can see in the
attached image the expected output according to me. :-)

What do you think?


[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1267555
[2] https://lists.w3.org/Archives/Public/www-style/2015Oct/0036.html
[3] https://lists.w3.org/Archives/Public/www-style/2015Nov/0070.html
[4] http://jsbin.com/zezawa/1/edit?html,css,output

(image/svg+xml attachment: positioned-items-auto.svg)

Received on Tuesday, 26 April 2016 15:20:30 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:02 UTC