css布局方式_css布局史 - grid一统天下

最近几年，前端经历了飞速发展，每隔几个月，就有新的技术框架产生，如果你有1年多没有接触过它，那么再上手的时候，你一定会对它感到陌生，似乎一不留神，自己就已经被无情抛弃了。

面对着js框架的飞速发展，得益于babel技术，浏览器可以很快地使用新的框架技术，vue，angular，react似乎也已经统治了好久好久。

而作为前端三剑客的css呢?似乎css3已经是很久很久的事情了，久到了我们不知道它是否还在更新，css是否还有新的技术产生。

虽然各种scss，stylus，less预处理器提高了我们代码的开发和维护，但是css依然缺少一个一击致命，一剑封喉的技术。

庆幸的是，我们等到了grid的到来，它的到来宣布了css布局从此进入了grid时代。

table布局

早期的网页布局是采用table的，也就是所有的内容都会放到table里面，如果想要内嵌布局，就会采用table嵌套table，那个时候可以说布局很简单，因为就是使用table，但是table过于繁琐，因此也产生了大量无用的代码。

div+css

css浮动的出现，彻底解放了网页布局，目前主流的网页采用的都是div+css的布局，这种布局简化了代码结构，通过使用css来定位元素位置，可以说这种布局极大程度上网站的开发效率，同时网页的可维护性也得到大大提高。

grid王者到来

首先我们看下grid的支持情况，从下面的图片可以看到，主流浏览器都是支持的，特别是在最新版的ie也采用和chrome一样的内核之后，可以说现在前端开发终于迎来了最幸福的时刻。

这是一个非常棒的布局解决方案。自从网络诞生以来，我们就一直在努力设计我们的网站，强迫他们去适应和使用那些不适合他们的方式。

不过网格布局的出现，直接从浏览器解决了我们布局的复杂性，我们不再需要复杂的css来生成网格布局，不需要使用bootstrap这样的网格框架来布局，我们可以使用简单的grid布局来完成。

使用grid的优点

• 我们可以创建任意数量的网格。
• fraction unit 使得控制布局比例非常方便。
• repeat可以重复布局。
• 最简原则，只需要定义需要使用的行和列。
• 网格支持命名

如何使用

1. 声明 display:grid;
2. 定义列 grid-template-columns: 100px 100px 100px;
3. 设置间距，grid-row-gap: 20px;