CSS grid is one of the more recent CSS features introduced into the world. It’s really popular online and there are a lot of tutorials that explain how to make the most out of the new potential it offers. I probably read a few dozen of them before ever actually playing around with it myself. A discerning eye will notice this site was designed with CSS grid. The aesthetic I am aiming for was something I presumed CSS grid would address perfectly. In making this site I learned of a few pros and cons of this feature that may be worth consideration in using it in the future.
The pros and cons of CSS grid are best categorized by usability, compatibility, and design, and the pros outweigh the cons.
How clever. That’s not a question, but a reaction. The addition of the CSS grid variable is a blessing in the form of arithmetic. The concept of a front-end framework can be ignored with math. The grid variable is a great link between design of print and digital mindsets.
Twitter’s (and every other) Bootstrap framework includes an extensive and scalable grid support. From the beginning, things have been factors of 12. 12 is the max. 1 is the min. Multiples of scale therein. This is a fine way of approaching web design. It is math. It makes sense. It’s also a dependency in the form of a shortcut. To use this framework you need to think within the boundaries of this system, and 12 seems fine. Reminiscent enough of the golden ratio, so why not? That’s why it is called ‘bootstrap’. “This works. Let’s move on.”
Why even use CSS grid if it only can replace part of a front-end framework? Simply, because everything other than the grid is fluff. How things fit and how things look are two different considerations. How things fit speaks to structure, foundations, and boundaries. How things look affect everything else. A house can look nice, but feel bad. A car can look nice, but feel bad. The same for anything digital.
CSS grid makes things fit by considering only math. Applying CSS grid variable settings is simple and presents a learning curve so shallow that nearly anyone can understand the premise in a fraction of the time it would take to introduce an entire front-end framework.
When testing my site I experienced of a few, potentially off-putting weaknesses of using Grid to design your next project. These challenges only presented themselves in ways that demonstrate minority interests, but ignoring something like this ultimately means work is incomplete.
A lot of people do not update their mobile device OSs as frequently as they should—including me, apparently. When testing this site, I learned through a series of troubleshooting actions that I needed to update my iPad OS from its 2016 version. CSS grid was not supported in iOS in 2016 so things did not look the way I expected. Device and operating system fragmentation will always prove to be a primary concern when adopting a new feature like Grid.
Firefox, no offense, is the last browser I test for when developing anything. If you plan to use CSS grid in your next project and wish to define the height of a particular grid element, you are required to define the height of any other element in the same column. While this is something that may be corrected upon reading this, currently Firefox does not assume the way Webkit does that the remaining amount of space in an area can be assumed to fill the entirety of the space. You are required to define the height of every element in a column if you define the height of any element in a column. What a mouthful.
Con: More Work
When I completed the home page design of this website and tested it in different browsers I was feeling very confident. It was not until designing a second page design did I realize I needed to design an entire, secondary Grid. This would not be a concern with a front-end framework. All structural design happens in the HTML so you can just riff some “col-2”, “col-4”, and be set. This offers a lot flexibility. However, this flexibility is completely optional and may not work at all in a more defined, rigid design. CSS grid makes you confront real questions about how you approach work. It really shines when a design system is entirely defined and all preparations have been made ahead of coding anything. To not use it can suggest you are comfortable with being a little wiggly when coding a project. CSS grid for a large-scale web project may appear to be too much work, but if written well it can deliver so many “ah-hah!” moments that will ensure a certain comfortability in maintaining and adding code.
At the end of the day, CSS grid represents the future norm. I wish I learned how to design for the web with this feature from Day 1. In addition to just making sense, it simplifies communications between designers and developers and makes web development much easier to understand for designers who do not share the same background. A good graphic designer will be well versed in working with grids. Not to mention, not needing to rely on an outside framework is always fulfilling. With Grid you can trust arithmetic and conceptualize an interactive experience in a more sensible way.
To read a usability primer on CSS grid, visit CSS Tricks’s guide or another leading development site.