Re: [css3-grid] updated draft

Alex Mogilevsky wrote:
> I’ve published an update at
> 
> http://dev.w3.org/csswg/css3-grid/overview.html
> 
>  
> 
> It includes changes from the last CSSWG F2F.
> 
>  
> 
> It doesn’t yet include changes from discussion at www-style, primarily 
> because I wanted to share an update before making further changes..
> 
>  
> 
> Feedback would be greatly appreciated!
> 

Couple of immediate questions/comments from implementor's point of view:

How min/max-width and min/max-height values interact with grid lines
defined by grid-columns/grid-rows attributes?

There are also intrinsic dimensions of elements. How they affect column 
widths/row heights at not-enough-space condition? Table layout is famous 
by the fact that table cells behave as if overflow:none (hypothetical 
value) defined - they never overflow/overlap with sibling cells - very 
stable layout.

-----------

I propose to:

1) drop grid-columns/grid-rows attributes all together. Introduce
additional value to the display attribute - grid instead.
(Better to use another attribute for child layout methods - like
used to be 'display-model' or 'flow')

2) allow 'gr' units to be used only as values of left/top/right/bottom
attributes.

3) @right/@bottom given in 'gr' units define right/bottom corner of the 
element in the grid.

4) Elements that have no left/top/right/bottom in 'gr' defined
are treated as elements spanning single row at current grid height. 
Elements with only left:Xgr defined are getting right:Xgr implicitly.
Same for top/bottom.

Grid calculation and dimensions in this case:

1) number of columns and rows computed as min/max values
left/top/right/bottom in 'gr' units.

2) column width and row heights are computed in exactly
the same way as in <table> so with normal
@width, @min/max-width, padding and border interpretation.
box dimension calculation is made as if box-sizing: border-box
declared for the elements in the grid.

3) max margins of elements in columns/rows define gap between
column/rows. margins overlap in horizontal and vertical dimensions and
with the value border-spacing attribute set for the container (the grid).

4) width and height of the cells can be defined in flex units (a.k.a. 
'fr', a.k.a. '*' - relative html units [1]). For definition of 'fr' 
units and principles of their calculation in this case see relative 
units in HTML spec.[1]. Flex units can be used as for width/height as
for margins.

Example, simple 2*2 grid with three cells, last one (in second row) 
spans two columns:

<div style="display:grid">
   <p style="left:1gr;top:1gr;"> 1.1 </p>
   <p style="left:2gr;top:1gr;"> 1.2 </p>
   <p style="top:2gr;"> 2 </p>
</div>

And famous content/sidebars example:

<body style="display:grid">
   <div style="top:1gr; left:1gr;"> left sidebar </div>
   <div style="top:1gr; left:3gr;"> right sidebar </div>
   <div style="top:1gr; left:2gr; width:1*;"> content </div>
</div>

[1] relative length units:
http://www.w3.org/TR/html401/types.html#type-multi-length

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 2 October 2007 05:43:10 UTC