對於CSS布局中CSS Grid Layout 和CSS Box Alignment兩大模塊有何看法？

前端開發人員對於CSS Grid Layout Module Level 1 （CSS Grid Layout Module Level 1）和 CSS Box Alignment Module Level 3 (CSS Box Alignment Module Level 3) 有何看法？

---

謝邀，分兩個方面來答一下：

一、CSS Box Alignment

CSS Box Alignment 規範定義了一系列屬性，用來控制元素在主軸和側軸的對齊方式，看過 CSS Flexible Box Layout Module 規範的同學對主軸和側軸的概念應該都不陌生了。

這個規範中的一些屬性或特性最早是在 flexbox 規範中產生的，隨著 flexbox 規範的日趨成熟，CSS 工作組決定把對齊這塊作為一個相對獨立的規範提取出來。所以該規範可以運用在 CSS flexbox、CSS grid 中。這是目前現代瀏覽器已經實現的，也是大家所熟知的，但其實也適用於 block 元素（Firefox 有望最先實現：1105571 - support CSS Box Alignment properties on blocks）。

規範現在已經比較穩定了，即將發布 CR 版本。值得稱讚的是 Firefox 實現的進度和完整度最好，想測試或者提 bug 的同學可以優先使用 Firefox Nightly。

意義：解決了 CSS 長久以來對齊老大難的問題。為其他 CSS 布局規範提供對齊方式的標準文檔。

二、CSS Grid Layout

CSS Grid Layout 是一個具體的布局規範，可以稱之為真正的柵格。

看看那些年我們一起折騰過的布局：

1. 垂直居中？

   &
&item1& &item2& &item3& &item4& &item5& &

   & .box {
display: grid;
border: 1px solid #2196f3;
width: 200px;
height: 200px;
justify-content: center;
align-content: center;
}


   

   任你多行單行還是圖片，都妥妥的中間待著，棒棒噠！

   

2. 自適應寬度？
   如果你還在折騰「雙飛翼」布局，那麼當你見到 gird 的時候恐怕要 cry了。

   

   

   

   &
&item1& &content& &side& &

   & .box {
display: grid;
height: 300px;
width: 500px;
border: 1px solid #2196f3;
grid-template-columns: 100px 1fr auto; /* 設置柵格為三欄 */
}
.side {
background-color: #fff8e2;
}

   .content {
background-color: lightblue;
}
&

   

   想要填滿剩餘空間只需要使用 fr 單位即可，就那麼簡單，還自帶多欄等高的效果。如果你不想要等高效果，那麼在 .box 設置 align-items: start 即可。太好用了！
   明天（3.8日）CSS Grid 將在 Firefox 52 率先登陸，Chrome 也會在三月底正式支持，興奮到模糊啊~~~

   

意義：Grid Layout 規範開創了 CSS 從一維布局到二維布局的新時代。

---

grid layout 好像是邪惡的微軟提出來的，flexbox 則是自由的 mozilla/google 提出來的

支持哪邊是政治問題！

---

基本上代表了未來網頁布局的發展方向，可能在將來再也不用寫各種蹩腳的 float, negative margin, position 等 CSS 來實現一個其實沒那麼複雜的布局了。

移動端可能會比較早的應用上，PC 端不抱什麼希望。

@一絲 寫了一個 Grid 實現雙飛翼 / 聖杯的布局效果，不過沒有實現主內容優先渲染的效果，更改如下：

&
&
&
&
&
&
&Document&
& body {
display: grid;
grid-template: 1fr / 200px 1fr 200px;
height: 600px;
}

main {
background: #6475df;
}

nav {
background: #f46166;
order: -1;
}

aside {
background: #c2dfc1;
}
& &
&
&&
&& && &
&


---

grid 的布局方式使響應式設計更加靈活了，學習了平面裝幀設計中的格線系統，將格線運用在屏幕上，讓設計師能更好地理解響應式設計的布局動態變化，而不再是單一的靜態頁面。而對於前端開發者來說 grid 減輕了不少斷點與計算縮放大小的工作。因為 grid 布局方式不適用於 IE 10 以下，所以大型網站及門戶為了顧及 progressive web design 仍然不敢採用 grid layout。響應式設計中經常會考慮到的不同屏幕布局對齊方式，而 box alignment 的出現則解決了這個問題。

---

推薦閱讀：