Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

SCSS includes for Grid Layout

SCSS includes for grid layouts

Published:

Reading Time: (approx) 1 min

Tags that this post has been filed under.

The main content about SCSS includes for Grid Layout

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.

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 simple 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)
Journal Index

Previous Article: Handlebars 'each' block helper and Json file

Next Article: Cache Busting Css and Js files