The History of Column-Based CSS Layouts

Before CSS frameworks, there were column-based layouts. What are CSS frameworks? How did they come to be? We must look at history to understand where we are today in front-end web development. So, let’s look at what was happening in the world of CSS before CSS frameworks became the main show in town.

A very brief history of CSS layouts

Since this is a beginner-level course, we won’t dive too deep into how and why CSS frameworks have developed the way they have.

We will only mention the most important parts of this history to understand better how things work and why things are done the way they are in popular front-end CSS frameworks.

So let’s go way back to around 2005.

Table-based layouts

In the early days of the web, building HTML layouts was not easy. CSS was not nearly as advanced as it is today, and there weren’t many things one could do with it. Using actual HTML tables was a way to build layouts for quite some time! This was a slow and painstaking way to build web pages.

It wasn’t easy to do, and it wasn’t easy to maintain. Then, sometime around 2005, as CSS matured, CSS-based design grew more popular. Debates of choosing between table-based and CSS layouts were a common occurrence.

In the early days of the web, building website layouts meant writing code with many hacks and workarounds.

People soon started seeing the benefits of using CSS rather than table-based HTML layouts, and the CSS camp started growing.

This led to the next step in the evolution of CSS layouts—CSS column grid systems.

The invention of the CSS column grid systems

During the fast-paced evolution of web layouts, some smart people started using visual columns to make it easier to write tableless, CSS-powered HTML layouts.

This led to various CSS column grid systems.

Note: This has nothing to do with the actual CSS grid, which came around years later.

One of the early CSS column grid systems is the 960gs grid system.

The idea of CSS column grid systems was revolutionary. People realized that most layouts could be separated into columns. There was debate on the best number of columns to use for some time, and slowly but surely, the accepted norm became 12 columns in a layout.

The reason for this was pure maths—12 columns can be split into halves (6 and 6), thirds (4 columns repeated three times), quarters (3 columns repeated four times each), and so on. It was this simplicity and versatility that ultimately won. Soon, all kinds of tools related to column grids started appearing. An example of a useful tool is the CSS Grid Overlay Chrome extension.

Here’s the above CSS Grid Overlay tool in action on this website: