W3C home > Mailing lists > Public > www-style@w3.org > December 2011

Re: [css3-regions] [css3-Grid] auto-generation, pagination, and code examples

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 9 Dec 2011 08:37:55 -0800
Message-ID: <CAAWBYDDkCXTzbJ9Q3OJ7FCd4yMwMzW8x_skhGeFCpcdaAqbAdw@mail.gmail.com>
To: Håkon Wium Lie <howcome@opera.com>
Cc: Rossen Atanassov <Rossen.Atanassov@microsoft.com>, Chris Jones <cjon@microsoft.com>, Vincent Hardy <vhardy@adobe.com>, W3C style mailing list <www-style@w3.org>
On Fri, Dec 9, 2011 at 1:59 AM, Håkon Wium Lie <howcome@opera.com> wrote:
> Rossen Atanassov wrote:
>  > I'm refraining from using anything fancy such as grid, template etc.
>
> What would the code look like if you we using, say, grids?

Something like this:

/* Region related style for redirecting content flows */
#article {
    flow-into: article_flow;
}

#region1, #region2, #region3, #region4 {
    flow-from: article_flow;
}

/* positioning and sizing of the region elements */
#page {
  width: 800px;
  height: 600px;
  grid-template: "aaa.e"
                 "....e"
                 "bbb.e"
                 "....e"
                 "c.d.e";
  grid-rows: 52% 4% 20% 4% 20%;
  grid-columns: 30% 5% 30% 5% 30%;
}
#regionA { grid-cell: a; }
#region1 { grid-cell: b; }
#region2 { grid-cell: c; }
#region3 { grid-cell: d; }
#region4 { grid-cell: e; }


> The white space issue remains (it seems intrisic to regions, perhaps
> we need a 'lh' value to express measurements in terms of line
> heights?)

Continuing this off-topic discussion, isn't this what line-grid is
supposed to do?  You give the region a height and then tell it to snap
to the line-grid.

~TJ
Received on Friday, 9 December 2011 16:38:46 GMT

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