Re: [css3-gridalign] Named cells, intuitive creation of page grids

> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of David Hyatt
> Sent: Tuesday, November 02, 2010 1:16 PM
> To: Tab Atkins Jr.
> Cc: www-style list
> Subject: Re: [css3-gridalign] Named cells, intuitive creation of page grids
>
> On Nov 2, 2010, at 4:51 AM, Tab Atkins Jr. wrote:
>
>> One of the most powerful parts of Template Layout was, in my opinion,
>> the ascii-art template that allowed the author to immediately *see*
>> what the page's layout would look like.  It was extremely intuitive
>> and simple, though it did tend to trigger a bit of backlash at first
>> sight, particularly from programmer types.  Most people warmed up to
>> it as soon as they actually tried to use it, though.
>>
>> I believe this is fundamentally compatible with Grid Alignment.  All
>> that the template has to do is create slot pseudoelements, and
>> position them within the grid.  This works great within Grid
>> Alignment, where grid rows/columns can be defined, but elements can be
>> positioned outside of the defined rows/columns without problem - it
>> just creates new columns and rows explicitly.
>>
>> So, for example, one could draw out a relatively simple layout like so:
>>
>> body {
>>  grid-template: "abb"
>>                 "acc"
>>                 "d@e"
>>                 "dff";
>> }
>>
>> This would automatically create a 4x3 grid and 7 ::slot() pseudos,
>> positioning them appropriately within the grid.
>>
>> All of the rows and columns are "auto" length, though, which may be
>> suboptimal.  Using the other Grid Alignment properties, you can
>> provide more control here:
>>
>> body {
>>  grid-template: "abb"
>>                 "acc"
>>                 "d@e"
>>                 "dff";
>>  grid-rows: 50px 70px 1fr auto;
>>  grid-columns: 200px 1fr min-content;
>> }
>>
>> You now have two choices for positioning.  You can either flow items
>> into the ::slot() pseudos, or you can position items using
>> grid-position.  The two don't conflict at all - either are potentially
>> useful.  You could even extend the grid further by positioning items
>> outside the 4x3 grid already defined; the effects of this are
>> well-defined and predictable from the Grid Alignment spec.
>
> Yeah, I agree that it would be good to bring over named cells.
>
> In addition I would love to see @page grid templates preserved as well.  That is another very powerful feature of CSS3 Template Layout that could be compatible with Grid Alignment.
>
> dave

I like this a lot, and agree with both Tab and Dave on these points:
named grid units, @page templates. Most of all, I like the idea of
more or less building on template layout, which is by far the most
intuitive and useful general page layout model in draft. For some UI
stuff, flexbox will suffice, and flexbox combines well with template
layout.

I like Tab's suggestion of:

body {
  grid-template: "abb"
                       "acc"
                       "d@e"
                       "dff";
  grid-rows: 50px 70px 1fr auto;
  grid-columns: 200px 1fr min-content;
  }

as opposed to the template layout variant

{  grid-template: "abb" /200px
                       "acc" /70px
                       "d@e" /1fr
                       "dff" /*
                     200px 1fr min-content; }

It's less concise, but also much clearer.

Cheers,
Stephen Hay

Received on Wednesday, 10 November 2010 14:07:50 UTC