The principles of using grids in design are not new, they date from the Second World War, with a number of graphic designers questioning the design of conventional page layouts, in favor of designing a system that provided a flexible, yet coherent, layout.

The same principles have been transferred to the web, starting with plain HTML, and CSS-based designs, before newer frameworks took over and helped to make construction easier.

It doesn't matter how the design is constructed, we can of course use HTML and CSS, or we might favor the image template approach (using packages such as PhotoShop), particularly if responsibility for designing the front end falls with a different team.

These are perfectly acceptable methods, but require a lot of manual effort—in this age of web design, time is critical; we can instead make use of newer frameworks (such as SASS, Bourbon Neat, or Bootstrap) to create our grids, as shown in this example (which uses plain SASS):

We can see this...