對于任何CSS框架而言網(wǎng)格系統(tǒng)都是最基礎(chǔ)的部分蛆挫。
CSS網(wǎng)格包含的要素
Creating Your Own CSS Grid System這篇文章的配圖太棒了，這里就直接用了...
- container 容器
- row 行
- column 列
- gutter 空隙
最普遍的Grid實現(xiàn)方式
就是類似于Bootstrap提供的分欄式柵格系統(tǒng)，通過排方塊的方式布局揭璃，通常有很多尺寸的塊讓你挑選狮斗，一般提供12欄風(fēng)格。這些方案通常使用float和inline-block的方式實現(xiàn)补疑，一個典型的6欄式Grid實現(xiàn)方式如文章Creating Your Own CSS Grid System所述歧沪，代碼如下:
.container {
width: 100%;
max-width: 1200px;
margin: auto;
}
.container * {
box-sizing: border-box;
}
.row::before,
.row::after {
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
padding: 12px;
}
.clo-1 {
width: 16.66%;
}
.col-2 {
width: 33.33%;
}
.col-3 {
width: 50%;
}
.col-4 {
width: 66.664%;
}
.clo-5 {
width: 83.33%;
}
.clo-6 {
width: 100%;
}
不過這些實現(xiàn)方式都有一定的缺點，摘錄Better, Simpler Grid Systems中的片段莲组。
Using floats requires clearing them which has a whole host of layout issues, most notoriously that clearing an element sometimes forces it below an unrelated part of the page (take this Bootstrap issue for example). In addition, clearing floats usually requires using both before and after pseudo-elements, preventing you from using them for something else.
Inline block layouts must address the problem of white-space between inline-block items, and all of the solutions to that problem are hacky and annoying.
總的來說就是float的clearfix占用了before和after偽類以及會導(dǎo)致清除浮動后的后遺癥诊胞，inline-block有默認(rèn)的空白間隙問題。而flexbox就是為布局而生，很多之前CSS無法解決的問題遇到Flexbox迎刃而解撵孤。
使用flexbox來完成柵格系統(tǒng)
如果你還不知道Flexbox是什么迈着，可以看阮老師的Flex 布局教程：語法篇和實戰(zhàn)篇，語法可能比較枯燥邪码，可以直接看實戰(zhàn)裕菠，然后看到不知道的回頭看語法。布局方面r阮老師參考了Solved by Flexbox 闭专，這篇文章可以用來學(xué)習(xí)有了Flex之后解決的CSS被詬病的問題奴潘。
目前我看到的最好的解決方案就是更棒，更簡潔的柵格系統(tǒng)影钉，以及根據(jù)這篇文章實現(xiàn)的milligram的柵格系統(tǒng)画髓。這篇文章中作者理想的柵格系統(tǒng)的特性如下:
- 每一行里的每一個柵格默認(rèn)都是同寬同高。默認(rèn)自適應(yīng)平委。
- 為了足夠靈活奈虾，能夠添加尺寸屬性到單獨的柵格中。沒有添加的肆汹，仍然簡單地平分剩下的可用空間愚墓。
- 支持響應(yīng)式布局，可以添加媒體查詢到柵格中昂勉。
- 每一個柵格可以在純直方向上置頂浪册，置底，劇中岗照。
- 如果讓所有柵格擁有一致的大小和對其方式村象，在容器上添加屬性，子元素能夠繼承攒至，而不需要無意義的重復(fù)厚者。
- 柵格能夠任意的嵌套。
容器
容器的作用在于限定網(wǎng)格系統(tǒng)的寬度迫吐，通常設(shè)置為100%库菲，一般會用max-width限定寬度，這里我們用1200p志膀，然后居中熙宇，margin auto就好。一個典型的container如下:
.container{
margin: 0 auto;
max-width: 120.0rem;
padding: 0 2.0rem;
width: 100%;
}
行Row
既然我們用Flexbox實現(xiàn)溉浙，那么Row就是Flexbox容器烫止，主軸為垂直方向，起點在上沿戳稽。
.row {
display: flex;
}
列Column
.column {
display: block;
flex: 1;
}
Flex對齊方式
對齊Flexbox容器中的內(nèi)容
.row {
&.row-top { align-items: flex-start; }
&.row-middle { align-items: center; }
&.row-bottom { align-items: flex-end; }
&.row-stretch { align-items: stretch; }
&.row-baseline { align-items: baseline; }
&.row-left { justify-content: flex-start; }
&.row-center { justify-content: center; }
&.row-right { justify-content: flex-end; }
&.row-between { justify-content: space-between; }
&.row-around { justify-content: space-around; }
}
輔助類（欄與偏移)
參考Bootstrap的12欄系統(tǒng)馆蠕。
.column {
&.col-1 { flex: 0 0 calc(100% * 1 / 12); }
&.col-2 { flex: 0 0 calc(100% * 2 / 12); }
&.col-3 { flex: 0 0 calc(100% * 3 / 12); }
&.col-4 { flex: 0 0 calc(100% * 4 / 12); }
&.col-5 { flex: 0 0 calc(100% * 5 / 12); }
&.col-6 { flex: 0 0 calc(100% * 6 / 12); }
&.col-7 { flex: 0 0 calc(100% * 7 / 12); }
&.col-8 { flex: 0 0 calc(100% * 8 / 12); }
&.col-9 { flex: 0 0 calc(100% * 9 / 12); }
&.col-10 { flex: 0 0 calc(100% * 10 / 12); }
&.col-11 { flex: 0 0 calc(100% * 11 / 12); }
}
當(dāng)然少不了對應(yīng)的偏移
.column {
&.col-off-1 {margin-left: calc(100% * 1 / 12); }
&.col-off-2 {margin-left: calc(100% * 2 / 12); }
&.col-off-3 {margin-left: calc(100% * 3 / 12); }
&.col-off-4 {margin-left: calc(100% * 4 / 12); }
&.col-off-5 {margin-left: calc(100% * 5 / 12); }
&.col-off-6 {margin-left: calc(100% * 6 / 12); }
&.col-off-7 {margin-left: calc(100% * 7 / 12); }
&.col-off-8 {margin-left: calc(100% * 8 / 12); }
&.col-off-9 {margin-left: calc(100% * 9 / 12); }
&.col-off-10 {margin-left: calc(100% * 10 / 12); }
&.col-off-11 {margin-left: calc(100% * 11 / 12); }
}
