从table到grid的web前端布局思维漫谈
WEB前端布局经历了从table的二维布局到grid的二位布局，初看非常的奇怪，从二维到二维仿佛看不到什么变化。更有甚者table布局在当前依然在WEB布局中存在。既然看不出来我们就缕一缕WEB前端布局发展的时间线：
1996年（大约），提出了提出了最早的布局方式Table布局，主要用于表格数据。当时网页没有那么复杂。
1998年，W3C发布CSS2规范首次定义了position属性的absolute、relative、fixed等值，并明确了绝对定位的行为规则。
2001年，提出了Float布局，通过使用float属性，块级元素可以浮动起来，从而可以在同一行显示多个元素。
2009年，W3C发布了Flex布局，也成为弹性布局（Flexible Box），旨在提供一种简便、完整且响应式的页面布局解决方案。
2010年，微软提出了Grid布局，是一种二维布局方式，可以给每个轨道设置固定的尺寸，也可以设置弹性尺寸。
从1996年到2010年，将近15年的发展，前端布局技术经历了：Table（表格）布局、Absolute（绝对定位）布局、Float（流式）布局、Flex（弹性）布局、Grid（网格）布局。这15年的前端布局既有发展也有兼容，比如Float和Flex是对Table的某一行的一种布局思维的兼容，这同一行情况下进行布局。再如，Grid布局将布局兼容了table布局的固定性和flex布局的灵活性。每一次布局的技术革命都是站在原有的技术基础上的，既弥补了原有技术的不足，又继承原有布局的思维。
直白一点讲，布局的核心功能就是将网页上的元素定位到网页上的某一个位置。那么最先想到固定一个位置的方式就是table，table可以将logo放在1行1列，将标题放在3行5列，将介绍放在7行8列...，这种方式清晰明了，让人一眼就可以找到内容所处在的位置。或者说一眼看过去就能看到自己要找的内容。但是table的劣势也在于固定，太固定了，我要改一个元素的位置需要将整个table推到重来，重新进行构建。这对于一个复杂的网页来说，布局的可维护性太差，一不留神就将整个网页改的面目全非。于是CSS2中提出了Absolute绝对定位，帮助改几个简单的位置，主要解决某些当时的手机端布局不兼容等问题。
可是随着互联网的不断发展，人们需要从互联网上获得内容越来越多，需要阅读更为复杂的网页内容，这时候，简单的帮助解决几个位置的布局方式已经无法解决根本问题，整个时候提出了Float布局，并且可以将CSS从网页页面中分离出来，成为了一个独立文件，这样的可维护性大大增强。举个例子你是做内容的，你写内容就好了，我是做布局的，我不调整内容，我只要改css就可以将内容调整好。这样可以合理分工帮助提高工作效率。
但是Float布局并不完美，Float是流式布局，所谓流式就是象一条河一样，就如滚滚长江奔流不息，我们有时候需要这条河停下来，我们要过河，这个时候我们可以用clear:both;来清除格式，但是往往我们就是找不到适当的位置来写clear:both。这个bug有时候会影响我们的工作效率。这个时候Flex布局，也成为弹性布局（Flexible Box）被提出来了。flex布局可以将内容严格控制在某一行，在这一行中你可以进行流式布局的方式进行布局，这样可以大大降低了某些原因不能clear:both的bug。不过有时候人类是贪婪的，既要又要，既要弹性布局也要固定布局。这时候就产生了有史以来最复杂的一种布局方式grid布局。grid布局既可以将元素定位到某一个轨道上，也可以随意修改某一个网格的元素的位置、样式等。当然这种复杂的布局方式往往在布局的时候产生不少bug特别在ios系统下产生很多不兼容。虽然这种布局方式是2010年提出来的，而真正普及到各个浏览器却用了整整7年，直到7年后的2017年才真正逐渐获得各个主流浏览器的支持。
总之，table到grid的发展并不是二维到二维的仿佛没有变动的发展，而且一场推动前端布局工作效率的发展。用table我们布局一个网页可能需要3天，用float可能需要2.5天，用flex可能需要1天甚至5个小时，那么用grid可能就需要2个小时。这种效率有时候并不在于开始制作前端的初始工作的时候，更多的是在维护工作的效率。如果让你维护一个table做的类似新浪等传统门户的时候，第一感觉绝对是头大。可是如果是flex或grid布局的时候可能就几分钟就可以搞定。这就是真正提高了生成效率最大程度降低了成本。
