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

(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.

>> 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;


Cheers,
Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/

Received on Wednesday, 7 November 2012 18:51:14 UTC