Re: [css3-grid-layout] relationship between 'grid-column', 'grid-column-position' and 'grid-column-span'

On Wed, Nov 7, 2012 at 10:50 AM, Kang-Hao (Kenny) Lu
<kanghaol@oupeng.com> wrote:
> (12/11/08 2:30), Tab Atkins Jr. wrote:
>> On Wed, Nov 7, 2012 at 4:30 AM, Kang-Hao (Kenny) Lu <kanghaol@oupeng.com> wrote:
>>> The spec says
>>>
>>>    # The ‘grid-column-position’ and ‘grid-column-span’ properties
>>>    # can be simultaneously specified with the ‘grid-column’ shorthand
>>>    # property.
>>>
>>> , but what would 'grid-column: "undefined1" "undefined2";' get expanded to?
>>>
>>> It would expect 'grid-column-position' to have 'undefined1' but what
>>> about 'grid-column-span'? The initial value '1'? But what happens when
>>> "undefined2" and "undefined1" are defined later?
>>
>> Huh?  This is well-defined - you get "grid-column-span:
>> 'undefined2';". (In the current draft syntax.)
>
> The spec says
>
>   # Name:       grid-column-span
>   # Value:      <integer> | <identifier>
>
> so it can't be a <string>. Perhaps it's missing here or something, but
> the spec doesn't have such an example so I can't tell.

Sigh.  Consider that a mismatch in the spec.  It's currently halfway
between supporting grid lines and not.  This will be fixed in the next
few weeks as I or Phil do more work on the spec.

If you go with "supports grid lines", then take grid-column as
written, and pretend that grid-column-span is "<integer> | <string> |
<identifier>".

If you go with "doesn't support grid lines", then pretend grid-column
was written as "[ [ <integer> | auto ] <integer>? ] | <identifier>"
and take grid-column-span as written.

>>> Also,
>>>
>>>   # EXAMPLE 17
>>>   #
>>>   # <style type="text/css">
>>>   # #item {
>>>   #    /* the following two property definitions are equivalent */
>>>   #    /* both place the item between the first and third line */
>>>   #    /* which is covering the first and second row of the Grid */
>>>   #    grid-row-position: 1 3;
>>>   #    grid-row-position: 1; grid-row-span: 2;
>>>   # }
>>>   # </style>
>>>
>>> but the grammar has
>>>
>>>   # Name:       grid-row-position
>>>   # Value:      <integer> | <string> | <identifier> | auto
>>>
>>> , so I guess something is wrong.
>>
>> Yes, clearly the example meant to say "grid-row: 1 3;" in the first line.
>
> I don't think so, the spec says
>
>   # 6.2. Grid shorthand properties
>   #
>   # Likewise, the ‘grid-row-position’ and ‘grid-row-span’
>   # properties can be simultaneously specified with the ‘grid-row’
>   # shorthand property. Note that the first input refers to the
>   # starting grid line, while the second, optional input refers to the
>   # span of the grid item if an integer, and the ending grid line if a
>   # string.
>
> so I think it should at least be 'grid-row: 1 2'.
>
> I intended to submit a detailed review but I had to stop here because I
> can't even get what the properties are saying. There's also
>
>   # The following example positions the first Grid item to cover the
>   # first two rows and columns of the Grid element.
>   #
>   # EXAMPLE 19
>   #
>   # <style type="text/css">
>   # /* covers the Grid element’s content box */
>   # #item1 {
>   #     grid-row: 1 3;
>   #     grid-column: 1 3;
>   #  }
>
> but shouldn't that be three rows and columns if I read the above
> normative definition correctly. Fortunately, there's an example matching
> the definition:
>
>   # EXAMPLE 18
>   # ...
>   #  /* The following property will set column position to 3 */
>   #  /* And column span to 2 */
>   #  grid-column: 3 2;

Bleh, yeah, you're right.  Again, I plead mismatch as the competing
ideologies led to spec edits, and those edits ended up being
inconsistent.

~TJ

Received on Wednesday, 7 November 2012 19:02:02 UTC