Adventuring into CSS Grid

For those of us who’ve been battling with css layouts from the early days of tables to the complexities of floats and grid-frameworks it seemed like this day would never come. For years there have been prophesies and naysayers. No one was sure if agreement could be reached in terms of defining browser specifications. Few dared to dream of the possibilities and the implications.

But now that it is here are we afraid to use it?

It has been said that this those who start off learning CSS in 2017 will wonder what all the fuss was about. Eventually floating frameworks will be spoken of as war stories much as table layouts are spoken of today. But making the jump seems to represent a collective difficulty. It may not be fear that is holding us back. It is wariness developed from trying all new tools, syntaxes, frameworks, and APIs. We are right to be wary.

There are some great articles written about all the various properties of CSS grid and this is not going to be one of them. The one I refer to most is A Complete guide to Grid written by Chris House for CSS Tricks. This article is more a chronical of the experience of moving from float-layouts to CSS Grid and what you will need to do to use it in production today.

Where to start

Firstly, play this game. It won’t take long and its pretty entertaining. A lot of this stuff is muscle memory so the more you get used to it the easier it will be when you have other considerations than just grid syntax.

Secondly, you will start to love Mozilla (if you don’t already.) No add-on is needed, just click on the little grid when inspecting an element with display: grid. Chrome hasn’t caught up as of this writing.

We will start in the obvious place which is browser support. According to Can I use and the browsers I choose to support on this project, my main considerations are IE10 and Edge both of which use an older specification of CSS Grid Layout. I will also consider Opera Mini and other mobile browsers by providing a mobile-first layout. This will mean that any discrepancies will not be noticible on mobile anyway. The unsupported desktop browsers may not have the finest version of this layout but it wil be usable nonteheless.

Whenever I try out a new technology I use it first on a low stakes project, most often this site or some side project. This time I chose a small side project that has a fairly uncomplicated layout and a fair number of forms. Forms can provide several challenges when it comes to layout and are generally look alright with a mobile first layout if no fallback is provided. From there its just a question of going ahead and making something and then testing it. Gridbugs from Rachel Andrews who has been working on the spec since its infancy is a great resource. This is meant to be a comprehensive list so be sure to contribute if you find anything that is new.

Be careful when using semantic elements as grid containers. It is important to note that the various HTML elements behave differently and each have their own specifications. For those cases where cross-browser compatibility is iffy @supports is another valuable too. Be sure to be precise about which part of the grid rules need supporting though. Sometimes only a partial fallback is needed.

The best way to learn CSS Grid layouts is to start practicing. There are increasingly more resources available and I will add them to this post (for a while anyway) as I come across them.

Happy gridding :)