Well written article with first principles in mind. I would like to mention that in the section where the author talks about placement there's a hiccup. When you place grid items with grid-column:start/end, start refers to the starting column line and end refers to the ending column line. Not the columns themselves. If you look at [1] you can see there's 3 columns but the ending is at '4'.
Funnily enough this doesn't apply to spanning.Notice here with grid-column:1/span 3 it spans the length of 3 columns. [2]
These details perfectly illustrate the authors excellent point of using named template areas and placing items semantically. I apologise if this is pedantic, I really did like the article.
This is a great article! A good assessment of how the grid might be used to cause less mental strain for the developer. I've just started using grid in practice, although already very useful then this article adds good insights into naming things and also on the design vs markup topic.
If I may nitpick on your nitpick :), then I don't think span isn't "funnily" not the same as the start/end columns -- if you want to span some number of columns then it shouldn't say "span 2" when you mean to span one.
Funnily enough this doesn't apply to spanning.Notice here with grid-column:1/span 3 it spans the length of 3 columns. [2]
These details perfectly illustrate the authors excellent point of using named template areas and placing items semantically. I apologise if this is pedantic, I really did like the article.
[1]https://jsfiddle.net/9ewzLcrs [2]https://jsfiddle.net/9ewzLcrs/1/