css布局方式 css布局史 grid一統天下

面對著js框架的飛速發展，得益於babel技術，瀏覽器可以很快地使用新的框架技術，vue，angular，react似乎也已經統治了好久好久。

而作為前端三劍客的css呢?似乎css3已經是很久很久的事情了，久到了我們不知道它是否還在更新，css是否還有新的技術產生。

雖然各種scss，stylus，less預處理器提高了我們**的開發和維護，但是css依然缺少乙個一擊致命，一劍封喉的技術。

慶幸的是，我們等到了grid的到來，它的到來宣布了css布局從此進入了grid時代。

早期的網頁布局是採用table的，也就是所有的內容都會放到table裡面，如果想要內嵌布局，就會採用table巢狀table，那個時候可以說布局很簡單，因為就是使用table，但是table過於繁瑣，因此也產生了大量無用的**。

css浮動的出現，徹底解放了網頁布局，目前主流的網頁採用的都是div+css的布局，這種布局簡化了**結構，通過使用css來定位元素位置，可以說這種布局極大程度上**的開發效率，同時網頁的可維護性也得到大大提高。

首先我們看下grid的支援情況，從下面的可以看到，主流瀏覽器都是支援的，特別是在最新版的ie也採用和chrome一樣的核心之後，可以說現在前端開發終於迎來了最幸福的時刻。

這是乙個非常棒的布局解決方案。自從網路誕生以來，我們就一直在努力設計我們的**，強迫他們去適應和使用那些不適合他們的方式。

不過網格布局的出現，直接從瀏覽器解決了我們布局的複雜性，我們不再需要複雜的css來生成網格布局，不需要使用bootstrap這樣的網格框架來布局，我們可以使用簡單的grid布局來完成。

宣告 display:grid;

定義列 grid-template-columns: 100px 100px 100px;

設定間距，grid-row-gap: 20px;