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

Re: Proposition. Positioning content with guidelines

From: François REMY <fremycompany_pub@yahoo.fr>
Date: Fri, 24 Feb 2012 17:08:22 +0100
Message-ID: <6EF6CD4AC50A48CC8C8DBD93B937893C@FREMYD2>
To: "Alexander Shpack" <shadowkin@gmail.com>, "CSS 3 W3C Group" <www-style@w3.org>
> -----Message d'origine----- 
> From: Alexander Shpack
> Sent: Friday, February 24, 2012 3:01 PM
> To: François REMY
> Cc: CSS 3 W3C Group
> Subject: Re: Proposition. Positioning content with guidelines
> On Fri, Feb 24, 2012 at 3:43 PM, François REMY
> <fremycompany_pub@yahoo.fr> wrote:
> >
> > BTW, your solution didn't use media queries, but it is broken since the
> > price will end up right-aligned in narrow screen (see attachement). 
> > You'll
> > still need some mechanism to switch from one layout to another.
> No, my solution is correct. Guideline "one" do not repeat.  Spanning
> is not alignment like text-align or float, if content is wide and
> can't be snapped to the guideline, it placed in flow as usual.

Do you mean that the end of a guidelined element isn't a guideline ? That's 
pretty annoying, if you want my opinion. Anyway, if you had to add another 
column after the "price/reduction/total" column, you would have had to add 
another guideline, which would have made your sample impossible. Or you 
would have had to specify that right snapping only apply if right snapping 
is possible on a specific guideline. That quickly becomes complex, too. You 
end up with something worse than a named cell solution.

Anyway, I think you should probably make a document explaining all the 
properties you introduce, how they works, and provide samples (all your 
precedent samples were kinda great).

> > For your new example, it's not so complex:
> >
> > #grid { grid-columns: 250px 1fr 250px }; grid-flow; rows; }
> > #grid > * { grid-column: 2 }
> >
> > When the user reorder divs, you can use "transform: translate" while the
> > element is moved, and then set "grid-column" to the value of the column
> where the element has been dropped (1 for widget, 1 for main, 2 for info).
> > > If you want to change the vertical order inside a column, too, you 
> > > will have
> > to change the source order, as specifiecd in "7.5.1 Automatic Grid Item
> Placement Algorithm".
> What happened, if response in my sample already have grid declaration?
> How can I set specified grid-column? What should I write, if my
> Application doesn't know, is complicated answer or not?

Grids can be embedded inside another grid, this is not a problem. You just 
need to specify style="grid-column: 1" to specify position in parent grid 
and "display: grid" to specify children are layed out as grids. However, one 
grid doesn't inherit from parent grid guidelines. 
Received on Friday, 24 February 2012 16:08:46 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:12 UTC