RE: [css3-grid-align] -- proposed new grid layout module

> -----Original Message-----
> From: GreLI [mailto:greli@mail.ru]
> Sent: Wednesday, October 27, 2010 10:15 AM
> 
> Good job 

Thanks!

> 1. What will be if a second (3rd, etc) item will be attached to same grid
> element? Will they follow each other or overlap? It's become more
> interesting when spanning elements overlaps starting from same or
> different grid elements.

If one grid item's cell intersects another then they may overlap, subject to the size of the cell, the size of the grid items and their alignment within the cell.  Here is an example of overlapping grid items in a 2 x 2 grid:

<div style="display:grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr">
	<div style="grid-column-span:2">AAAAAA</div>
	<div style="grid-row-span:2">BBB<br>BBB</div>
</div>

Renders:
BBBAAA
BBB
(first three A's are under BBB)

> 
> 2. Are fractions intended to be used on fixed sized grid host element?
> What will be with 'auto' width and height: sized by content? How about
> absolute positioned elements in grid items in that case?

Yes to the question on fractions with fixed size grids.  For example, if I set a width and height of 200px on the grid element in the prior example, the 1fr values would all report 100px via the getComputedStyle API.

An element with a width of auto and display:grid will size itself like an element with display:block, and element with a width of auto and display:inline-grid will size itself like an element with display:inline-block.  In the inline-block case, the size of the grid is being driven by the width of its columns (and note that the column's width may in turn be driven by the width of grid item's it contains if the column is one of auto, fit-content, min-content, max-content).   

Here's an example of a grid that would be 50px wide:

<div style="display:inline-grid; grid-columns: fit-content fit-content">
	<div style="width:25px">A</div>
	<div style="grid-column:2; width:25px">B</div> </div>

> 3. Does grid items sizes automatically related to grid?
> Or width/height:100% rules are desirable to achieve advantages?

Grid item size will stretch to grid if 'grid-column-align' and/or 'grid-row-align' are set to 'stretch'.
Note that % when used on a grid item does not refer to the grid cell; % refers to the containing block, which is the grid itself.
 
> I think it's good idea to implement shorthand for 'grid-column' and 'grid-
> row', e.g. 'grid-place'. (It seems to be not too comfortable to specify
> both rules every time.)

Yes, it is a good idea. 'grid-position' or 'grid-cell' are possible names too. We kept this out of the initial draft to focus on overall model first.

> Are grid items (or other child non-'display:grid' elements) without
> coordinates supposed to fill empty grid cell? What if no empty cells left?

Initial value for 'grid-column', 'grid-row', 'grid-column-span' and 'grid-row-span' is 1. If one or more items in the grid doesn't have grid placement properties specified, all such items are piled in cell (1,1). In most cases it would not be desired, but it should be noted that a grid with all items stretched to its only cell is functionally equivalent to XUL's deck or stack: all items are stretched to the size of biggest item in the stack; then they can be made visible one at a time by changing 'grid-layer' property.

> > [1] http://www.interoperabilitybridges.com/css3-grid-align/

Received on Wednesday, 27 October 2010 19:55:59 UTC