When the web started, layouts looked like this article. A single page with text and images following the only top-down flow available. Design choices was around backgrounds and text colors.
Table era
Tables came along bringing two dimensional layouts. It was a huge step forward which unleashed creativity on the web.
One of the reasons is that design conventions on the web didn't exist yet. Everything had to be invented. In fact, what we call conventions are practices that stays over time but we can hardly predict when they happened. For instance, no one is able to tell how and when navbar and sidebar became navigation layout conventions.
Another reason for this creativity was the absence of screen sizes constraint. Back at that time, we had no smartphones, no tablets and almost all computers shared the same screen size. This mean, you were sure our visual didn't break.
However, one of the major issue lies in the mix between visual styling and the content which made our page style impossible to redesign and also impossible to reuse. In this context, CSS came out.
Hard coded float layouts era
CSS was invented to separate the content from the visual style, given us a lot of advantages among reusability, accessibility and SEO.
CSS did not provide a powerful layout model nevertheless, float did the job for a while. At the same time, the complexity caused by the arrival of new devices and screens, was growing. With it, the need of a reliable responsive design became a necessity.
The problem was, Float wasn't designed to be used like we did. We ended up playing with percentage to create multi column layouts. Lots of math had to be done in order to align elements and the support of older browser was a nightmare. Even with the best intentions, layouts lacked of reliability and consistency. Therefore people started to lose confidence in CSS and concluded CSS wasn't enough.
CSS frameworks era
In this context, CSS frameworks came along, and with them the idea of grids. The 12 column grid layout was one of the most famous ones. The idea is to define a container of a specific dimension and to split it into 12 columns. Finally, helper classes allowed you to place your content.
Frameworks took away the burden of responsiveness and did the math for you. Websites heavily used them to get rid of layout headaches. But it came with a price. Layout standardization took away creativity, not to mention that we had to learn another tool in order to create layouts for the web.
Standardization took away creativity. A large majority of the web follows the same layout patterns, which has been even enforced by the misusage of design systems. Of corse, best practices and industrialization are very important and we've seen lot of improvements in term of user experience. But lots of misguidance came along the way. And people started to use these tools by default without understanding what tradeoffs they imply.
Take a look at newspaper layouts or magazine layouts . Every pages takes care of choosing the right layout for right content. Newspapers and magazines use layouts to emphases the content and to make it attractive. They wants their readers to enjoy the reading experience through the content and the visual. For instance, this article, like 90% of the web is a perfect counterexample. Our brain is still formatted by our experience with CSS frameworks.
The future of layouts
Lots of new features have been rolled out in CSS this recent years, empowering developers and designers.
- CSS Grid
- Flexbox
- CSS logical properties
- Multicolumn
- Viewport Unit
- Transformations
- CSS Shapes
Among them, we can find Flexbox, CSS Grid and Viewport Unit. I suggest you to check them out. There is a tremendous amount of good articles about them on the web. All of these features are reliable and consistent across browsers. The web isn't stiff anymore.