Grid Like You’re Mondrian
Grid Like You’re Mondrian

Mondrian was a pioneer of abstract art. His humble beginnings as a rather average figurative landscape painter led him to incredible things that are still contemporary today.

What we know Mondrian for is his compositions of grids, lines and primary colours. Inspired by his own uninspirational early works he noticed his compositions could be simplified into horizontal and vertical planes. A sky representing a rectangle of color, a landscape another, a tree a vertical line, a dog a square etc. Over his life he developed this totemistic timeless style until he ultimately reached a point where his artistic vocabulary was reduced to simple geometric elements.

What would Mondrian’s tool of choice be if he was a UI designer you ask? Simple, CSS Grid! He would have rejoiced in October 2017 when it was introduced into the CSS DOM, almost as if was reimagined just for a modern day Neoplasticism resurrection .

CSS Grid allows us to make powerful responsive layouts. Rickity old Floats/Bootstrap/Flexbox layouts are merely 1 dimensional across a horizontal plane. Grid allows for both vertical and horizontal, 2 dimensional layouts and much much more.

Hold onto your hats as we explore the power of this new layout technique and Grid like your Mondrian!

Layout History

The evolution of website layout looks something like this:

1989 Inline design

Elements flowing one after the other.

Not really design but like all good things, they start from humble beginnings.

1995 Table design

Elements put into table cells, think like how you use a spreadsheet. Tables were never designed for layout but desperate times called for desperate measures and we certainly made creative use of them.

1998 Float design

Element taken out of natural flow and aligned left or right.

Like designing but doing it from a bed infested with bugs.

2007 Framework design

You design within the restrictions of the architecture, which is why most websites have the same layout…do you want to pay just so you can look like everyone else? It really has been a bleak decade of rehashing the same layout.

2017 CSS3 Grid design

An actual CSS tool designed specifically for layout for the first time in 18 years.

Finally a magical unicorn we can get creative and productive with, worthy of our master of Neoplasticism!

 

Grid is Good

Why is CSS3 Grid good news? It is actually the first time since the beginning of web design that we have CSS properties designed to create layouts. Everything preceding it was just a hatchet job, just re-purposing something to do what it wasn’t designed for. Grid is innately responsive & was first and foremost solely designed for layout. That we have had nothing up to this point makes it a miracle we were able to do anything at all..a fine example of “if there’s a will there’s a way”.

Grid lets you separate content from layout. Each grid area can be named and inserted with content from DIVS. Simply create a Grid layout & name each cell in the grid. Target the DIV to insert itself into the named Grid area and it’s done, it couldn’t be more easier and flexible.

“Named” Grid areas really make layout changes a piece of cake. In seconds Mondrian could reshuffle his layout and content, put the dog where the sky was, the tree where the lake was and the land where the sky was…you get the picture! Modular like Mondrian! CSS Grid layout gives us flexibility like we have never known and we are entering into golden era of online design.

 

CSS Grid sounds new and fancy! How well is is supported?

Grid has been around for about a year and a half and now has full support across Chrome, Firefox, Safari, Edge including their mobile versions. Not just good support either, by their own admission the CSS consortium polished Grid more than anything they have done before.

CSS Grid was first supported in IE10, unfortunately it didn’t get the greatest implementation of CSS Grid spec. However there are workarounds to accommodate IE 10 so using a CSS Grid solution over reverting to deprecated methods of web design is a wise move today.

Developers seem to still be a bit slow adopting Grid. Anytime something new turns up we habitually find fault & turn our noses up at it. I put it down to being comfortable with making what you can as opposed to what you could. Either way Grid based design will take over and become standard, it’s inevitable. Freedom, productivity and efficiency always come out on top.

To recap, if your designing a new site and you want it to have a future, give you more flexibility and want it to be robust across all manner of devices make sure its developed using CSS Grid.