Image depicting a shelf containing a tree.

Gridding with pride!

The Introduction

As a web developer, it’s important that we are always looking at what’s next, always in fear of getting left behind! So naturally, when one of your friends comes into University yelling like a town crier about the holy grail of website layout, you take notice!

As such this self-initiated project looks at CSSGrid layout and everything it brings to revolutionise website development. The purpose of this project was to simply explore what CSSGrid had to offer, how I might use it to create website layouts and if it’s going to save me any time. To truly try and learn this ‘Holy Grail’ I attempted to make two different layout designs and try and eliminate as much padding and margins as I could.

A screenshot from an awwward winning website that has terrible UX.

The Description!

Other than from the town crier, I had never heard of CSSGrid before and therefore when I was pointed in the direction of Rachel Andrews and her website Grid by Example, it only seemed logical to start there. Rachel Andrews was considered as the figurehead of promoting and teaching people about CSSGrid. Her definition of grids is; “Grid Layout gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts.”. You can clearly see why my friend was excited about it!

CSS code used to initiate Grid layout,

The Set-up!

Learning CSSGrid through Rachel Andrews and CSSTricks made getting up to speed relatively simple as they both provided very detailed information about each tag and what it does on screen. However, as with being at the cutting edge, the main challenge faced was browser support. As grids isn’t widely supported yet, I had to use Firefox Developer for most of the project, with grids being rolled out as standard on base Firefox towards the end of the project. Other than that, and GitHub, I used Atom text editor along with an Atom package, created by the same friend as it happened, CSSGrid Shorthand’s that condensed the long elements into three letter prompts.

Screenshot of browser support table for CSS Grid layout.

The Demonstrator!

I managed to create two different layouts using grids as this projects aim was to simply try out creating layouts there is very little content on the sites and they aren’t as responsive as I’d like but they allowed me to condense a few days’ worth of work tweaking divs into a few hours. If the sites look broken on your browser, you either need to enable experimental web tools or download a developer browser such as Firefox Developer or Chrome Canary. On the other hand, if you think you can build on what I’ve already produced, feel free to clone my repo!

The Process!

The first step of this process was to create a grid container. Sounds simple but it was a little confusing at first. This is where you define the layout of your grid, however there is no visual aspect to begin with so the layout is all mental. Apart from drawing the plans, CSSTricks’ ‘Complete Guide to Grid’ had a comprehensive series of graphics to help you visualise what the grid would look like and understand what was happening when plotting your rows and columns.

I found placing everything within a cell as opposed to many different divs to be not only much easier to read and manage but a lot less stressful. Not only that, I found that I was hardly ever using padding and margins to create the effect I wanted, as I could implement Flexbox to apply the finishing touches. As CSSGrid becomes more widely supported, I can see elements such as float and padding becoming depreciated in place of grid or maybe some other revolutionary tool.

When creating layouts ‘pre-grid’ I found that I was constantly creating a new div just to place things in a certain place, leading to messy and not to mention code that goes against best practice, along with issues known as ‘Div-itus’, as you are not supposed to be creating a separate div just for stylistic reasons.

One criticism with grids would be that without the Atom package, some of the elements such as ‘grid-template-column’ are extremely long. Although I have a package to allow me to combat this, it could cause more typos meaning the code won’t work. Furthermore, due to nature of cutting edge technology there isn’t yet any sort of best practices as there is often more than one way of doing things

Screenshot of one of two ways of defining grid areas.

The Evaluation!

If I was to do this project again, the only thing I would change is the amount of content on the examples themselves, to make them seem like more real-world examples, to showcase how grid could be implemented into actual websites. The demonstrators are only very basic as their purpose was purely for me to learn how to use it for common website layouts. The best thing about grids is how easy it is to learn due to extensive research from people such as Rachel Andrews and the CSSTricks team. Each element is explained in high detail and with accompanying demonstrations from imbedded Codepens, you can tweak and get to learn the new skills efficiently.

The Support!

As of March, 2017; only chrome and Firefox support it on their most recent update, with safari and edge looking at introducing it in their next update!

Back to top.