Re: [css3-grid-layout] Interaction of "gutters" and automatic item placement

On 03/28/2012 12:02 PM, fantasai wrote:
> On 03/27/2012 05:11 PM, Tab Atkins Jr. wrote:
>> The automatic item placement algorithm works very well when attempting
>> to flow a list of items into a grid, but it fails when you want the
>> grid to have "gutters" between the items.
>> ...
>> Gutters are very common in grid systems (for example, see the very
>> popular fluid grid in Bootstrap
>> <http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem>),
>> so we should support this use-case.
>>
>> I suggest a "grid-gutters:<length>  <length>?;" property. (Actually it
>> would be a<track-breadth>  without the keywords.)  This establishes
>> gutter columns and rows, which take part in sizing, but can't have
>> elements placed inside of them, or be addressed directly in any way.
>> (Basically, this is identical to the border-spacing property for
>> tables.)
>
> I agree with your use case (and it's been on my mind the past few weeks
> as well, after reading Alexander Shpack's messages), but I disagree with
> your method. I think we should re-use the 'column-gap' property and add
> a 'row-gap' property for the other dimension. (We'll need a 'row-gap'
> property if we add a 'column-length' property as we've discussed anyway.)

Concrete proposal:
   - Reuse 'column-gap' for grid-column gutters
   - Introduce 'row-gap' for grid-row gutters
   - Make 'border-spacing' be a shorthand for these two
     (and thus make them be longhands for 'border-spacing').

Thoughts?

~fantasai

Received on Thursday, 2 May 2013 22:07:12 UTC