Visual representation of a CSS specification


I deliberately avoided focusing on code used to produce my work in each of the previous sections, however without it what you are reading would not exist. The advancement of Grid is one of the catalysts behind this decision; the other being an approach that I hadn't tried.

Prior to Grid, whilst writing: Don't build a Bootstrap style grid-system with Flexbox, I thought about changing Interior from being yet another resource on how to generate a series of “columns” using mixins, into a series of design principles that promote creativity in web design.

By that point I'd realised design is rarely the focal point when it comes to what we commonly refer to as a Grid System, who knows what the reasoning behind the trend that has arisen really is? Maybe it was born out of convenience, or worse still, we've simply copied each other. There's also a thought in the back of my head telling me there's a shortage of industry-hardened graphic designers involved in web design for us to learn from.

Anyway... the future has arrived.


Interior has always been experimental and a way for me to implement and learn. It originally derived from Bootstrap 3.3.7.

Then the Flex spec arrived and enabled more possibility, that meant re-writing Interior.

Just when I was coming to the end of so much learning, re-writing, and consideration, came Grid.

I was aiming to release Interior ahead of it, and convinced myself that a milestone in my progress would be a good thing to look back on, but Grid beat me to it—I knew it would, I was being stubborn.

Paradigm shift

In anticipation of Grid—during Interior's “Flex period”—I rationalised: due to the new abilities the Grid spec provides; I had better understand what a Grid System is.

To me, this meant studying a definitive source. I chose Grid Systems in Graphic Design by Joseph Müller Brockmann. After studying it, the realisation of what Brockmann documented hit me like a ton of bricks.

I tried to apply the guidance using Flex, and to a point things worked, but getting there was so convoluted—in the end it couldn’t be achieved with the 1 dimensional Flex without the use of margin.

I decided out of curiosity to see for myself why there was so much enthusiasm for Grid. Immediately my Flex based approach became obsolete, to continue would have been an exercise in futility.

The spec is the framework

Lately, I’ve read some articles, e.g. this, that allude to the following sentiment: “the spec is the framework”, specifically where Flex and Grid are concerned, and I agree.

But what about design principles, do they belong with a framework's documentation? Often they appear to lack any solid design reference.

The most popular, due to their own success, and people's desire for an off-the-shelf convenient solution; became synonymous with the very concept of web design.

How high is the bar set?

What Grid provides is superb, however the way we approach layout won't progress if we only regurgitate the same designs from before, using Grid.

Let's not forget the modern-day concept of grid layout originated from Swiss Graphic Design.

The term Grid System needs to be re-defined

Who’s responsibility is it to detail design principles, and should there be any?

Is this something that the spec could, should, or even consider referring to from a historical and educational point of view?

The reason I ask is that I believe the meaning behind what a “Grid System” is has been lost, I learned the concept from frameworks, and I'm sure there will be many others like me. However after reading the work of Brockmann and comparing to what I learnt from frameworks I feel like I missed something fundamental along the way.

If we only consider the recent articles, and presentations—e.g. Jen Simmons' and Mark Boulton's—about the design limitations of frameworks, and how web design trends lead to stagnant and unimaginative results, why not supply the reference required to learn how to push the creative boundaries?

Perhaps the spec could provide said reference, after all it is the main source of documentation. Maybe I have misunderstood the purpose of a spec, however Grid is not like any other we've seen the likes of before.