Scss includes for Grid Layout

by Will Moody

With Css Grid Layout being widely accepted for page and page component layouts it is becoming easier to use, I had a need for the main section of a page to contain full width and narrower sections.

The way to do this is to this is as per Rachel Andrew's great example here.

This uses a square brackets format for the scss, as below:-

grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 50em) [main-end] minmax(1em, 1fr) [full-end];

One issue with this is when the scss is compiled I ran into an css expression error, this was due to square brackets not being recognized, the remedy for this was very simply to use the unquote function, like this:-

grid-template-columns: unquote("[full-start] minmax(1em, 1fr) [main-start] minmax(0, 50em) [main-end] minmax(1em, 1fr) [full-end]");

which when compiled results in this final code:-

grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 50em) [main-end] minmax(1em, 1fr) [full-end];