W3C home > Mailing lists > Public > www-style@w3.org > January 2012

RE: [css3-grid] Add an analogue of border-spacing?

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Fri, 6 Jan 2012 04:36:46 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>, www-style list <www-style@w3.org>, Phil Cupp <pcupp@microsoft.com>
Message-ID: <D51C9E849DDD0D4EA38C2E539856928412DCEA9F@TK5EX14MBXC214.redmond.corp.microsoft.com>
± From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
± Sent: Tuesday, January 03, 2012 11:30 AM
± 
± Putting gutters into designs seems to be a reasonably common thing.  The 
± current Grid makes this overly difficult, however.  

Making it easier to define grid as rows/columns/gutters would be great, as it reflects how grids are commonly designed.

I thought quite a lot about that, but I so far I didn't find a way that would not simplify one thing and complicate others.

The biggest strength of grid is simplicity. It has rows and columns defined by lines, and anything within the grid can be addressed uniformly, to designer's intent. For example, if something is to be aligned with middle of the gutter it can be "left:1.5gr" - that would be difficult if gutter is not part of addressable space. Even without grid positioning (don't be confused by status of that spec though), it should be possible to choose to align with left or right side of gutter.

One step towards easier gutters is to use columns+gutters concept to define grid, but use it same as before:

	grid-columns: 1fr (0.5em 1fr)[14]; /*15-column page grid*/

could instead be specified like this:

	grid-column-count: 15;
	grid-column-width: 1fr;
	grid-column-gutter: 0.5em;

and probably a shorthand that gets the same distribution as 'columns' property in multicol.

That would make it easier to define the grid, but still in grid coordinates 10th column will be defined by lines 19 and 20. People get it, but it would be cool to not have to.

± Note that this would complicate the assignation of names to grid lines.  I'm 
± not sure how to resolve that.  It seems possible to handle this magically 
± with good results, though - if you did something like "grid-column: 2 3;" it 
± can automatically select the left edge of the second column (to the right of 
± the gutter) and the right edge of the second column (to the left of the 
± gutter).

Exactly. If we come up with a way to make it easy to define and use simple grids (without making advanced use harder) it will be a really good change. This is definitely a direction worth exploring.
 
Alex

Received on Friday, 6 January 2012 04:37:17 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT