列式CSS布局的发展历程
了解CSS及其网格布局的发展历史。
在CSS框架出现之前，网页布局主要依赖于基于列的设计。那么，什么是CSS框架？它们是如何产生的？要理解当今前端开发的现状，我们必须回顾历史。
让我们来看看在CSS框架成为主流之前，CSS布局领域发生了什么。
CSS布局的简短历史
由于这是面向初学者的课程，我们不会深入探讨CSS框架为何发展成今天这个样子的详细原因和过程。
我们仅会提及这一历史中最重要的部分，以便更好地理解当前主流前端CSS框架的工作原理以及为何采用特定的设计方式。
让我们回到大约2005年左右的时间。
基于表格的布局
在互联网发展的早期阶段，构建HTML页面布局非常困难。当时的CSS远不如现在先进，可用功能十分有限。因此，使用真正的HTML表格来搭建页面布局成为一种常见做法！这种方式不仅效率低下，而且极其繁琐。
这种做法难以实现，也难以维护。然而，大约从2005年开始，随着CSS技术逐渐成熟，基于CSS的布局设计开始变得越来越流行。关于是否使用表格布局还是CSS布局的争论频繁出现。
在互联网发展的初期，构建网站布局意味着需要编写大量技巧性代码和各种变通方案。
人们很快意识到使用CSS相比基于表格的HTML布局具有明显优势，于是支持CSS的一方逐渐壮大。
这推动了CSS布局演进的下一步——CSS列网格系统的诞生。
CSS列网格系统的发明
在网页布局快速发展的过程中，一些聪明的人开始借助视觉上的列结构，使无需表格的CSS驱动的HTML布局更易于编写。
这催生了多种CSS列网格系统。
注意： 这与后来才出现的实际CSS Grid无关。
其中最早的CSS列网格系统之一是960gs网格系统。
CSS列网格系统的思想具有革命性意义。人们发现，大多数页面布局都可以被拆分为若干列。关于应该使用多少列存在过一段时间的讨论，但最终12列成为广泛接受的标准。
其背后的原因纯粹是数学上的便利性——12列可以轻松地划分为二分之一（6+6）、三分之一（4列重复三次）、四分之一（3列重复四次）等。正是这种简洁性和灵活性使其脱颖而出。很快，围绕列网格的各种工具应运而生。例如，CSS Grid Overlay Chrome扩展就是一个实用工具。
以下是该CSS Grid Overlay工具在本网站上的实际效果：
要获得类似的效果，只需将CSS Grid Overlay扩展添加到你的Chrome浏览器中，然后点击扩展图标即可对任意网站进行网格叠加实验。需要注意的是，许多网站的列网格宽度默认为1170像素，这常见于旧版 Bootstrap 3 的桌面端容器宽度。