Re: css-grid] feedback

On Fri, May 15, 2015 at 6:41 PM, Michael Trilford <michael@boost.co.nz> wrote:
> grid-column: 1 / 2 and grid-row: 1 / 2 feedback.
>
> I'm still torn on this, when designing, I never refer to my vertical columns
> as grid lines. They are columns 1 - 12 for example.

There's nothing wrong with that, and the syntax supports only thinking
of it in terms of rows/columns.  Just use the row/column index first,
and set the row/column width as a span second, like "grid-column: 1 /
span 3" for an item that starts in the first column and is three
columns wide.

The reason we based Grid on lines is because there are use-cases for
both types of references, and it's easier to think about rows/columns
in terms of lines than the opposite.

> When I span across multiple columns in my grid, I usually reference class
> name that uses a fraction. .col-2-3
>
> In a two column layout of a 4 column grid, one column 1 may span 3 and the
> other column will span 1. I would reference that as .col-3-4 & .col-1-4.

You can still do that in Grid, just set "grid-column-end: span 3;", etc.

(Note that older "css grids" had to bake the grid width into the class
names, because they were building a grid from the bottom up; there was
no actual grid to interact with, just a bunch of floated elements
interacting with each other.  That's unnecessary now.)

~TJ

Received on Tuesday, 2 June 2015 16:22:57 UTC