that's really nice. Looking at level 3, why is -start inclusive but -end exclusive? start = 1, so it isn't zero-based, that I get, but if it starts with 1, it looks like it would end with 3, but 4 is the answer (1 and 3 only sets the first two columns).

I get that that is CSS, not the game's rules, so not arguing why the game handles that way, I'm just curious what the motivation is for the CSS rule.

When you use numbers, it's referencing the lines between sections, not the sections themselves. So a grid of 4 columns will have 5 line numbers.

I found this a strange decision in the Grid standard design. Surely most people* would think more in terms of "cells" that "cell-dividing-lines". Then again, compared to the design decisions in much of the rest of CSS including every other standard layout mechanism this is a fairly small gripe, overall CSS Grid is a big improvement. And when using the excellent "grid-template-areas" (compared to ASCII art elsewhere in this thread) you don't really specify start and end points anyway.

* By people, I mean designers (used to bootstrap-style grids), coders (used to arrays) and everyone else (used to spreadsheets).

But in this case you have 1,2,3,4,5 and start 1 end 4 selects 1,2,3. So it appears inclusive 1, exclusive on the 4 to me. If it were like some instances of substring where it is (index, count), I could get that, but it almost reads as "start right here, end right before this."

Actually, wait. Thought on your line numbers a bit and I'm thinking that points to each vertical line as a number (so in this garden's case, 6 per row). I just plugged it in as that and it follows. Just feels foreign to me as I'd do start/end 1 for just first cell, start 1 end 2 first two cells, etc. I'll get accustomed to it though. I wonder if there are other scenarios that followed the same logic in CSS that I just didn't attempt to really grok. Thanks for pointing it out.

This is a great tutorial but it will give you zero hints if you get stuck.

Cutest thing ever.