Re: [css3-grid] new editor's draft available

Tab Atkins Jr.:
> Alex Mogilevsky <alexmog@microsoft.com> wrote:
>> 
>>  o Eliminated the ability to select Grid Cells with the grid-cell pseudo
>>  (eliminated the pseudo-element selector)
>> 
>>  o Eliminated the ability to style Grid Cells including any ability to
>>  control its inner layout with the display or grid-cell-stacking property
>>  (eliminated the grid-cell-stacking property)
>> 
>> The rationale for the changes related to the grid-template property are
>> based on a belief that a more general mechanism would be better suited to
>> generating containers that can apply an arbitrary layout to their contents.
>> Making such a mechanism layout specific seems like an unnecessary
>> restriction and orthogonal to the problem of Grid layout.
> 
> It seems like this would make it much harder to use Regions with Grid.

I’m not sure about that.

Like the ‘absolute’, ‘fixed’ and ‘relative’ values of the ‘position’ property, the ‘grid’ and ‘inline-grid’ values of the ‘display’ property (and several more out of the level 2 set) establish a new formatting context (i.e. region) for its descendant nodes. That means the grid base (with “display: grid”) is an implicit, anonymous region and the children belong to an anonymous flow connected with that region, unless having some other property overriding that.

You could also have an explicit, possibly named grid region that is independent of the markup; rewriting Example I:

  @region "mygrid" {
    content: contents, from("gamegrid");/* ‘contents’ = ‘from("mygrid")’ */
    display: grid;
    grid-columns: auto minmax(min-content, 1fr);
    grid-rows: auto minmax(min-content, 1fr) auto;
  }
  #title, #score, #stats {
    content: to("mygrid");
  }
  #board, #controls {
    content: to("gamegrid");
  }
  #title    {grid-column: 1; grid-row: 1;}
  #score    {grid-column: 1; grid-row: 3;}
  #stats    {grid-column: 1; grid-row: 2; grid-row-align: start;}
  #board    {grid-column: 2; grid-row: 1; grid-row-span: 2;}
  #controls {grid-column: 2; grid-row: 2; grid-column-align: center;}

> Without [::grid-cell], authors will be forced to put junk elements into their markup
> solely so they can position them on the grid and fill them with regions.

Since regions ought to be possible grid cells when they flow into a “grid region”, you just need a further level of indirection; again rewriting Example I:

  @region "gamegrid" {
    display: grid;
    grid-columns: auto minmax(min-content, 1fr);
    grid-rows: auto minmax(min-content, 1fr) auto;
  }
  /* The following regions are what ‘::grid-cell’ used to be */
  @region "title", @region "score", @region "stats",
  @region "board", @region "controls" {
    content: to("gamegrid");
  }
  /* style them as desired */
  @region "title"    {grid-column: 1; grid-row: 1;}
  @region "score"    {grid-column: 1; grid-row: 3;}
  @region "stats"    {grid-column: 1; grid-row: 2; grid-row-align: start;}
  @region "board"    {grid-column: 2; grid-row: 1; grid-row-span: 2;}
  @region "controls" {grid-column: 2; grid-row: 2; grid-column-align: center;}
  #title    {content: to("title");}
  #score    {content: to("score");}
  #stats    {content: to("stats");}
  #board    {content: to("board");}
  #controls {content: to("controls");}

PS: Yes, I didn’t use the current Region draft’s syntax.

Received on Sunday, 24 July 2011 17:57:49 UTC