I've been working through Rachel Andrew's great set of video tutorials on CSS Grid Layout at http://gridbyexample.com/video/ (which I highly recommend!), but came across a weird problem.

Working through the Names Lines tutorial using a new Pen, the editor kept throwing an error when I tried to insert a line name, e.g. grid-template-columns: 2fr [content-start] 4fr [content-end];

It just didn't seem to like the link names at all.

I Googled around, and wondered if something had changed since the videos were made, but could find no clue.

I was using a brand new Pen, so settings were default. What could be going on? Turns out I was using SCSS (which I normally do without issue) and as soon as I changed this to plain CSS - boom! Errors gone!

Seems the SCSS validator is not ready to handle CSS Grid line names quite yet.

I just thought I'd share this in case it helps anyone else save the time I've wasted trying to solve this little issue.


562 2 3