/Grid-Overlay

A fast way to overlay a flexible visual grid to check alignment.

Grid-Overlay

This is a fast way to overlay a flexible visual grid to check alignment and proportions.

In some cases, CSS Grid Systems can contain unnecessary code. Additionally, grid systems should ideally be based off content, not imposed on a design. While standard in print design, these visual proportions often get lost on the web. Visually, a 50% width div within a 80% width container != a 50% wide div relative and proportional to the overall composition. Everytime we nest / position percentage based markup without running math, we technically break the compositional grid.

All this provides is a flexible visual grid for potential percentage pushing to help shore up proportions instead of eyeballing everything.

Credit to: https://gist.github.com/simurai/845383