CSS Grid Systems : What Are They Really?

css html bootstrap

Grid systems provide value by simplifying the API to layout elements on a web page. Doing it with plain CSS and HTML is far harder and requires a better understanding of the nuances of the layout elements in HTML. The grid systems hides us from the complexity.


How I Use Grid Systems


I don't find any value in using them. I go full commando when writing front-end code. I find that I have to use a grid system only when I am maintaining software written using one before I got involved.

I may include a grid system in a project if I sense that I will not be in the project for very long because I work on multiple projects in short periods of time. This means I will not be writing the layout code in said project forever. I ensure that the UI framework that I develop will play nicely with the CSS grid system that will eventually be used in my absence.

Problems with grid systems


The original intent behind the concept of a grid is to make the scanning of a web page easier. A web page designed with the base framework of a grid in place is easier to scan for the reader. So the only legitimate place for a grid is in Photoshop. Grid as a concept is a visual design paradigm.

The 12 column split + gutter system that all CSS frameworks provide in itself provide no value in simplifying laying out of web pages but provide a useful framework for how we visualize the front-end of a web page.

Somewhere along the visual design paradigm was lost in translation and now the word "Grid" has come to mean almost exclusively a CSS grid system that hides the complexities of laying out an element on a screen – a convenience tool. As far as CSS frameworks go the underlying structure of 12 columns and gutter is not even the best logical break down of a flexible UI development framework.

If you have a custom visual design that is beyond a set of boxes stacked vertically and horizontally then you better not implement it using a grid framework. You will not achieve satisfactory results assuming you are trying to achieve near pixel perfect replication of the design. The grid system is an integer multiple of a certain width.


Conclusion


In the end it is what it is. Developers who are not CSS HTML/CSS Nazis like me find value in using it. Entire multimillion-dollar businesses have been built on it. If someone finds value in it then by all means you should continue using it.

Anything that simplifies and hides complexity always has less flexibility than the more complex solution. Knowing where the grid systems' limitations lie are important.

Recent Articles | Archive