在网页设计的历史中，为了实现一个居中的div或者响应式的页面布局，开发者们不得不滥用HTML/CSS的特性，如负边距、绝对定位等。幸运的是，随着Flexbox和Grid布局的引入，这些“黑暗时代”已经结束。Flexbox已经得到了广泛的支持，大约两年前，主要的浏览器也开始实现了Grid布局。经过30年的发展，网页布局的问题几乎得到了解决（尽管还在等待Subgrid的实现）。
如果还没有听说过CSS Grid，这里有几个优秀的资源可以帮助入门：
这些网站（以及其他许多网站）在描述Grid特性方面做得很好，所以在这里不会重复这些内容。相反，将分享在学习Grid时制作的页面： （刚刚注意到也存在，更多的实验场总是好的！）
网站不是一个Grid生成器，而是一个可以快速测试各种CSS Grid属性效果的地方。可以随意调整属性，并立即看到结果（也可能想要打开浏览器的开发者工具，看看样式是如何实际应用到容器和项目上的）...如果感到迷茫，不用担心，只需重新加载页面就可以回到初始状态。
以下是网站的样子： 在左侧，可以控制grid容器的属性（具有grid-container类的div）。在中间，可以设置grid项目的数目（具有grid-item类的div），并看到生成的网格。如果点击一个项目，会打开一个额外的面板，可以控制特定的grid项目属性。如果不确定一个属性的作用，将鼠标悬停在它上面就可以看到简短的描述和示例值。
在Chrome 75、Firefox 68和Edge 44中测试了这个页面。