The wonders of CSS Grid

I can’t believe that it’s been five months already since I started working at Say Hello. In the time I’ve been working with Nico, there has been a lot to learn. From how to deal with clients directly and speaking to them not just on a technical level but also on a project management level, to technical procedures like using IT CSS, which we use to structure more complex projects. I have also become much more friendly towards the BEM technique of coding CSS, now that I’ve had the opportunity to work with somebody who’s been implementing it in their projects for a long time.

Although I have a lot of experience in programming for the web, I’ve been using CSS frameworks to help me build frontend code for the past four years. This has been a bit of a thorn in my side, because I’ve been writing CSS myself since around 2001. Before I started using frameworks, I wrote all of the layout rules from scratch and it was only in 2013-2014 that I began using CSS pre-processors. I changed to using frameworks when the pressure was on to make websites more quickly – in particular after the experience of coding the massive Unia website on my own over the course of several months in 2014.

One of the biggest changes since joining Say Hello is that there is much less pressure to create results at an unrealistically rapid pace. I now have time to create websites within much more sensible timescales, allowing me to create much better results and take the time to use more modern techniques. CSS Grid is one of these techniques – a technology which I have been interested in ever since it was announced. 

Thanks to a lot of preparation on the part of the browser manufacturers, the technology was quickly and widely adopted and is now supported by over 90% of all browsers which visit the sites I maintain. CSS Flexbox has been part of my daily process since it became acceptably supported, and having used it for over three years now, it’s automatically part of my process. Using CSS Grid is the next logical step on this path.

In the 1990s and 2000s, web browser manufacturers tended to push new versions of their software online as quickly as possible. This usually lead to the inclusion of bugs and problems, which made the job of a web developer more difficult. These days, thanks to concerted efforts by browser manufacturers and contributors, updates are implemented in smaller steps. This means that the possibility of a larger number of problems within a single update is reduced. The default setting for most modern web browsers is to automatically load the updates in the background, installing them silently and allowing a seamless process. This process has also helped to get past one of the biggest difficulties in the adoption of new technology: IT departments with insufficient resources to provide regular manual software updates.

When CSS Grid was planned, the developers decided to ensure a much more detailed level of work before the technology became available to the wider public. Alongside a much more detailed development process, however, browser “power users” had the ability to activate the incomplete technology via hidden options in the browser. This allowed us to give feedback to the browser developers in advance of the release. Because so many developers are deeply committed to improving the state of the web, they are only too keen to provide their feedback. This helped the CSS Grid developers to make sure that the version which was released to the public was largely free of bugs, right from the start. Within a very short time of CSS Grid becoming available in browsers, it was therefore widely supported in a stable version by a large percentage of all web browsers in use by the browsing public.

What’s so great about CSS Grid? Without going into a great deal of detail – there are many other online resources providing as much information as you need – the simple answer is that there are far fewer hacks and workarounds required to create a truly modern web page layout. I proved this to myself this week, when a strange problem related to the calculation of a column layout and its margins in Microsoft’s Edge browser was resolved in moments using CSS Grid, instead of battling with workarounds which I’ve used for a long time. 

Scrrenshot of Rachel Andrew's website, built using CSS Grid
The website of Rachel Andrew, who is well-known in the community for (amongst many other things) her extensive contributions to the development and promotion of CSS Grid

As part of my role at Say Hello, I’ve begun designing websites again for smaller projects. The first one of these was a web shop, which provided the twin challenges of designing a complete website for the first time in a while and working on a Woocommerce shop for the first time since last year. One of the most difficult challenges to overcome for this project, though, was to think of the design and concept as a designer rather than as a web programmer. It would appear that I still have the ability to put my programming hat aside and concentrate on the visual aspects of the website.

I’ve missed this aspect of producing for the web, as part of my work when I first came to Switzerland was to take on all aspects of the website creation myself. Although I have been a programmer for many years now, it’s still the creative side of the job which speaks to me the most.

The designs which I’m trying to achieve are more complex than the simple arrangement of rectangular blocks which form the basis of the vast majority of websites online today.

Andy Clarke's book “Art Direction for the Web”
Andy Clarke’s wonderful book, “Art Direction for the Web”, published by Smashing Magazine

Curves, diagonal lines, overlapping text; these are all perfectly valid items to use in a design and ones which can be much more easily implemented using CSS Grid. Because I knew that I was going to be doing more design work as part of my role, I invested in Andy Clarke‘s new book “Art Direction for the Web”, which contains a great many examples of how to make real art-directed layouts for the web. Simply looking at examples Andy’s included in his book has inspired me, and they are forming the bases of ideas that I’m working on right now. 

17 or 18 years ago, I was coming up with design ideas for websites which were most definitely outside the box. Back then, it was much easier because we didn’t have to consider responsive web design or multiple devices and multiple screen sizes. Luckily, I jumped on the responsive web design bandwagon in 2010, when the technique first became a thing. That means I have getting on for a decade of experience working in this area, which helps to makes the graphic design aspect a little bit easier.

But that’s a topic for another blog post.

Leave a comment

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.