At its most basic, the layout of a webpage is composed of navigation, header, sidebars, body, and footer.

Essentially what we are defining is a grid layout.

Over the years, the web platform has used different html elements to accomplish this grid layout.

In this article, I'll cover the brief history of techniques used to layout web pages.

Tables

Hold your scoffs.

The table html element is meant to display tabular data.

But due to the limited elements and css features available in old browsers, designers had to get creative in order to generate grid layouts.

The table element fit the bill because it allowed the construction of grid layouts in an intuitive way.

One problem with using tables to define web page layouts is that HTML is a markup language. It is meant to mark up text in documents to improve readability and provide semantics.

With HTML you can improve the readability of a document by marking up text with heading tags, or tabular data with table tags.

Another problem with using tables to define web page layouts is the use of nested table layouts (a practice that commonly came to be called table hell). This not only made the code hard to maintain but also further reduced semantics.

By using the table tag for visual styling rather than tabular data, the table tag lost semantics.

However, semantics alone was not enough to stop people from using tables to define page layouts.

What really stopped this practice was the need to create websites that responded to the size of the screen, especially when mobile devices started gaining popularity. Enter responsive design.

Before responsive design, website designers practiced adaptive design. With adaptive design, developers maintained separate websites for different ranges of device screen sizes.

But managing two websites was difficult, especially when taking SEO into consideration.

Eventually browsers added better support for creating web page layouts, and responsive design prevailed.

Floating divs and media queries

By using divs instead of tables, developers were able not only to give tables their meaning back, but also create dynamic layouts.

This technique became especially useful as responsive design started to get adopted.

Creating a two column layout is trivial using divs. The float css property allows you to float one div to the right and another to the left. Basically a two column and infinite row grid.

But the problem is that the float css property is meant to float objects so that text can wrap around them. So we normally float an image to the right or to the left of a paragraph. That is what float is supposed to be used for.

The height of a floated div ends up being related to the height of its content.

And that means that our cells in a grid layout made with divs may end up with different heights. And this presents a myriad of problems to solve from problems with typography, to alightment, to backgrounds.

The problems are fairly easy to fix using css, but there are many ways to fix them.

Nevertheless, divs were here to stay, you just had to get used to using container, row, column classes and use css Frameworks that had figured out how to deal with the edge cases (by learning more classes).

Flex box

Enter flex box, whose sole purpose for its existence (it seems to me) is to standardize the fixes for the edge cases.

Flex box allows you to easily align, wrap, and space elements inside an element (commonly the div element).

This means you no longer need to resort to css hacks or Frameworks to align, wrap, and space elements.

This reduces the amount of html, css, and JavaScript needed, and improves performance and user experience.

Great, do we need anything else?

Grid

CSS Grid? Where have you been man, we needed you like from the beginning.

The one thing flexbox does not standardize, is the creation of dynamic layouts.

When defining your layout using flexbox, you have to be a little clever about how you define your markup. But even when you are clever, the markup will define some of the layout.

With a css grid, omg omg omg 😱, you can define the layout fully in css.

Finally, a formal way to define layouts. Css grid is meant to formally define grids.

And it's been a few years since it was implemented, so browser adoption is getting really good.

CSS grid allows you to write fully semantic HTML - by using article, section, aside, header, footer, nav, etc - and use CSS to define how those elements are laid out.

Now we can focus on writing content with HTML (sort of like we do with markdown) and style it with CSS.