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

[css-grid] Span to unknown named grid lines and implicit lines

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Tue, 12 Jan 2016 17:46:29 +0100
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <56952DE5.20908@igalia.com>

I've some doubts regarding what's the expected behavior when we place an
item spaning to a unknown named grid line.

The important text of the spec here is [1]:
  If a name is given as a <custom-ident>, only lines with that name
  are counted. If not enough lines with that name exist,
  all implicit grid lines are assumed to have that name
  for the purpose of counting this span.

So, let's use some examples to explain the issues. I'm attaching 2
images for each issue with the different options A) and B). I hope they
help to understand the issues.

Issue 1: Imagine that we've a 1-column grid:
  grid-template-columns: 100px;

And that we place an item using:
  grid-column: span bar / 2 foo;

Initially we've just 1 column:
  |  1st  |

First it resolves "2 foo", which creates 2 implicit tracks on the right:
                [foo]   [foo]
  |  1st  |  2nd  |  3rd  |

Then it resolves "span bar", and here we've 2 possible options.

1.A) According to "all implicit grid lines are assumed to have that name".
  So it should consider the implicit tracks already created on the right
in the previous step.
                  [foo]   [foo]
                  [bar]   [bar]
    |  1st  |  2nd  |  3rd  |

  Then it doesn't need to create any implicit track on the left.

  The item should only take 1 column, the 3rd one.

1.B) It creates 1 implicit track on the left:
  [bar]                  [foo]   [foo]
    |  -1  |  1st  |  2nd  |  3rd  |

  So the item takes 4 columns, from -1 to 3rd (both included).

IMHO, and with the current text in the spec the right answer is 1.A).
However this leads to the next issue.

Issue 2: Imagine that in the previous 1-column grid, we set the name
"line" for the last line:
  grid-template-column: 100px [line];

And we place an item with:
  grid-column: -5 / span line;

In this case we've enough lines to match "span line" (so the text quoted
above doesn't apply).
  |  -3  |  -2  |  -1  |  1st  |

So the item takes 4 columns, from -3 to 1st (both included).

But what happens if an item has:
  grid-column: -5 / span 2 line;

So we've 2 options again:
2.A) In this case and according to "If not enough lines with that name
exist", we should consider all the implicit lines to have that name:
  [line] [line] [line]         [line]
    |  -3  |  -2  |  -1  |  1st  |

  So the item takes 2 columns, from -3 to -2 (both included).

  Note that the item with "span 2 line" would be smaller than the item
with "span line"!

2.B) If we follow a similar approach to 1.B) we'll be creating an
implicit line on the right:
                               [line]  [line]
    |  -3  |  -2  |  -1  |  1st  |  2nd  |

  So the item will take 5 columns, from -3 to 2nd (both included).

Probably the best option is that we follow B) behavior in both issues 1)
and 2).
IMHO, if that's the case the spec needs some further clarification.


[1] https://drafts.csswg.org/css-grid/#grid-placement-span-int

(image/svg+xml attachment: issue-1-span-unknown-grid-lines.svg)

(image/svg+xml attachment: issue-2-span-unknown-grid-lines.svg)

Received on Tuesday, 12 January 2016 16:47:10 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:56 UTC