Re: Comments for Grid Layout

On Fri, May 3, 2013 at 6:08 AM, Rachel Andrew <rachelandrewuk@gmail.com> wrote:
>>> 2) They universally found it confusing that gutters are columns too [2] and
>>> expected an equivalent of multicol’s column-gap instead.
>>
>> Yes, we need an explicit gutter property for column and row gutters.
>> Otherwise, auto flow is *completely* broken when "gutters" are used.
>
> I think that will make a huge difference. It currently feels as if one has to hack round the lack of explicit gutters. Something like column-gap would work very well.

Strongly agree.  There's another thread we posted to yesterday with an
explicit proposal - use 'column-gap' and a new 'row-gap' property to
set gutters, and repurpose 'border-spacing' as their shorthand so you
can set them together.


> Can you explain where it is incorrect - mostly because a ton of people have linked to it so I'd like to clarify where I'm muddled! With these posts I'm pretty much writing up what I think is supposed to happen for my own use, and publishing it in case it helps someone else.

Sure!  It's not a huge thing, and it does hit an area that should be
greatly helped by us writing the "Common Uses" section.

First, there's a minor error about using a named line in "grid-end" -
you say that "grid-end: gutter;" will use the last gutter line.  We
changed it several weeks ago so that all the properties start counting
from the start/before side of the grid, because we decided that
behavior was confusing.  You may have read the old behavior before we
changed it, though, and not realized it had been tweaked by the time
you wrote your blog post.  (You can use negative numbers to count from
the opposite end, if necessary.)

Second, there's some confusion about exactly what 'span' does.  When
you use a number or a name to identify a line, it finds the line
you're referring to by counting from the start/before edge of the
grid.  So you can refer to the "first gutter line" by saying "gutter
1", the second by saying "gutter 2", etc.  Using 'span' makes it
relative to whatever line the other side is attached to: saying
"gutter 1" now means "the first gutter line *from the other side of
the item*", etc.

Here's a more explicit example.  Take the grid setup from your post:

  grid-definition-columns: "nav" 200px
                           "gutter"  20px
                           "main" auto
                           "gutter" 20px
                           "sidebar" "ads" 200px;

Saying "grid-start: nav; grid-end: gutter;" will make an item sit in
the first column, because it starts on the first line and ends on the
second line.

Saying "grid-start: main; grid-end: gutter;", though, is wrong.  It's
telling it to start on the third line (named "main") and end on the
second line (named "gutter"), when you probably meant it to end on the
fourth line (the second "gutter" line).  (It ends up error-recovering
to the right behavior, but that's by accident - when you have an end
edge before your start, it recovers to just spanning one row/column.)

What you want to say instead is "grid-end: span gutter;", which mean
"end on the *next* gutter line", relative to where your start edge is.
 This'll work regardless of where you place your start edge.


Finally, this isn't an error, but it would probably be useful to
highlight that "grid-row/column" are the more useful properties for
most cases.  The "grid-before/etc" properties are for advanced
use-cases.  Just saying "grid-column: main / span 2;", for example,
doesn't require you to think about edges *at all* - you can pretend
that the named lines are actually naming columns, and all is well with
the world.  Again, this is something that we'll make better in the
spec soon, but having tutorials on the web point it out as well will
be helpful.

~TJ

Received on Friday, 3 May 2013 16:54:14 UTC