CSS3 Grid是一个新的排版系统，设计的初衷是给那些习惯了传统出版行业的设计师使用，因为Grid有很强的版面控制能力，能够给我们乱七八糟的Web Page带来更便于阅读的体验，和多平台适应性。
曾几何时网页设计的主流工具可是<table>标签，一切复杂的设计在<table>面前都是垃圾，没有一个<table>搞不定的，如果不行就在嵌套一层<table>，如果还是不行，那就再继续嵌套一层<table>，反正只要有<table>那就没有解决不了的问题。
在我刚接触网页设计的时候最推崇的就是使用<table>来设计，因为<table>标签的控制能力太强了，什么居中，什么等距排列都是<table>的拿手强项，那时候的CSS就是一个弱鸡，你要是用CSS来排版保准能让你加班加到吐血为止，就连使用Photoshop输出的切片也是给你用<table>排版的，可见在当时<table>就是网页设计的核心。
后来网页设计上开始流行起一股风潮，那就是数据归数据，样式归样式，标签要有严格的意义，这一切的根源就是Google。因为Google的搜索引擎是全自动运行的，不受人为主观得影响，所以它对于数据本身更感兴趣，然而一层套一层的<table>标签会严重阻碍Google的数据采集，从而也会影响到网站的搜索排名，为了优化网站搜索，SEO们开始想尽办法优化，最简单的方法就是将网页的内容改造成对机器友好的，换句话说就是网页的内容是结构化语义的。通俗的说就是文章的标题就是只能用<hx>这列标签表示，文章的段落只能用<p>来表示，而<table>也只能明确的表示为表格。从此开始<table>就不再被网页设计师所推崇了，因为他们的客户需要有更好的搜索排名，有了排名才能换成钱，赚钱才是硬道理。
好吧，其实设计师对于<table>也没有多少好感，看看那犹如蚊香一样的<table>嵌套，调试起来也是吓死人的节奏。因此放弃<table>也不失为一个不错的选择，但是如此一来排版问题就来了，以前用<table>能够轻松解决的问题，现在变得异常的复杂。比如最简单的全局居中，使用<table>的时候只要设置表格高度和宽度是100%，然后设置<td>竖直和水平居中就能解决了。但是没有了<table>之后，这个要求实现起来异常的复杂，甚至有的公司就拿这种题目作为面试题来考。
就在大家想出各种奇思妙想解决这些问题的时候，CSS也在不断更新（相对于JavaScript的更新速度，CSS是真良心）。排版问题都在一一解决，而且也有各种各样的CSS框架提供统一且方便的排版工具。<table>究竟是啥恐怕对于新一代的设计师来说都不知道了，可能只有在设计表格的时候会出现。
虽然CSS的排版功能越来越强大了，设计师还是希望能够引进印刷排版工具Grid（网格），在互联网媒体逐渐取代了传统媒体后，用户对于可读性的要求也随之提高，那种随随便便排版的页面，要么就是惊鸿一瞥，要么就是找找资料，如果要静心阅读还是需要有更优美的排版。没错，为了满足大众不断增长的审美需求，CSS又增加了Grid排版工具。这个工具可谓威力巨大，Flex能够实现的功能Grid一样能够实现，Flex要很复杂才能实现的功能，Grid轻轻松就能实现，不但对于排版来说非常方便，对于程序员也是异常强大，再也不用绞尽脑汁的去计算边距了，Grid能够轻易的实现网格排版，瀑布流排版以及Layout布局。
但是当你熟悉了Grid之后是不是觉得好像以前在哪里也有类似的工具呢？没错，这个不就是<table>的翻版么！Grid能够实现的功能<table>一样都能实现，原来兜兜转转20年，依旧回到了起点。<table>消失的20年时间又以另一种身姿出现在了我们眼前，只不过那时的<table>可谓一家独大，而现在Grid面临着与Flex的对决，不过总的来看Grid应该会取代Flex，或者两者长期共存，毕竟Grid的语法太啰嗦了。
历史就是一个轮回，但是又是不一样的，Grid与<table>功能相同，当时作用完全不同了，Grid是一种排版工具，本身不参与到内容的解读，而<table>本身的作用就是当作表格数据的呈现载体，所以虽然二者有着相同的功能，但是本质却是完全不同的。这也就是技术进步的逻辑，虽然看似回到了原点，但是内涵已经得到的新的升华
