search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

Grid-column grid-row value separator #117

Open livlab opened 7 years ago

livlab commented 7 years ago

More of a curious question: Do you know why indicating a range of column start or end, as well as a range of row start and end lines uses a / to separate the values?

grid-column: 3/5;
grid-row: 2/4;

It just seems like a convention that will be very confusing. Is this used elsewhere? I'm not CSS fluent so am just noticing it in this context. Why not just use a space in between to indicate start and end values? A slash certainly does not reinforce the idea of a range. Just wondering if you know the genesis (sometimes understanding the source makes these seemingly arbitrary things easier to remember). Thanks in advance.

livlab commented 7 years ago

Likewise with grid-area, which I think makes it further confusing since it is not obvious you are writing start coordinates for row and column first and then the end coordinates. This is further exacerbated by the fact (and maybe I am missing something obvious here), rows before columns order seems wrong? At a minimum it would be alphabetical? Maybe you have insight as to why this is like this.

rachelandrew commented 7 years ago

It's not a range, it's just start and end, it's a shorthand for:

grid-column-start and grid-column-end. A forward slash is used in other shorthands too, for example border-radius.

rachelandrew commented 7 years ago

as for your second question, it is both starts then both ends. Alphabetical would be weird for anyone non-English speaking. Also grid-area is a shorthand too, I've written at length about that in this article https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/

livlab commented 7 years ago

Is it incorrect to think of it as a range? I understand the values indicate first position and last position. The resulting effect is affecting all positions between them, which is why I was thinking range.

rachelandrew commented 7 years ago

You can think of it as anything you like :D but it is just the start and end line. If you only span one track you can miss the end, you might also set the start to auto.

livlab commented 7 years ago

Hmm, I see. Good food for though (and experiments). Much appreciated, thank you!