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

Re: Proposition. Positioning content with guidelines

From: Alexander Shpack <shadowkin@gmail.com>
Date: Sat, 25 Feb 2012 00:59:15 +0200
Message-ID: <CAK4xKXn6XNhTtn27aHokD9=03FLcJm0eVP6-YfjyoYk+HM4m2A@mail.gmail.com>
To: François REMY <fremycompany_pub@yahoo.fr>
Cc: CSS 3 W3C Group <www-style@w3.org>
> Do you mean that the end of a guidelined element isn't a guideline ?

Sorry, it's my fail, I forgot to explain, what you see on this image

If content is snapped to the left edge of guideline, use next algorithm
* if left margin is defined, return right edge of margin space
* if left border is defined, return left edge of border space
* if left padding is defined, return left edge of padding space (not
sure, that is good decision)
* if right padding is defined, return right edge of padding space
* if right border is defined, return left edge of border space
* if right margin is defined, return left edge of border space

Only one point is used for snapping. Guideline is not a box, it's line.

> 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.

I can't see the difference between "add another guideline" and "add
another template|column|row|somethingelse". What is better? The
solution, that is more scalable.

> 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.

If guideline name is specified, block should snap to it, otherwise it
should be snapped to any guideline
Block should be snapped to nearest guideline and nearest guideline's
snapping point.
Guideline may have two snapping lines, it's depends from padding,
border and margin properties.

> 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).

English is not my native language, I like a dog, I can understand, but
don't speak.
Maybe, is good solutions the graphical specification by me and text
description by somebody else?

> 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.

.grid { grid-columns: 250px 1fr 250px }; grid-flow; rows; }
.grid > .el { grid-column: 2 }

<div class="grid">
 <div class="el grid">
   <div class="el">Where am i?</div>

How can I place second <div class="el"> inside 2nd column of first ".grid"

Received on Friday, 24 February 2012 22:59:44 UTC

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