對(duì)于任何CSS框架而言網(wǎng)格系統(tǒng)都是最基礎(chǔ)的部分。

CSS網(wǎng)格包含的要素

Creating Your Own CSS Grid System這篇文章的配圖太棒了，這里就直接用了...

• container 容器
• row 行
• column 列
• gutter 空隙

最普遍的Grid實(shí)現(xiàn)方式

就是類似于Bootstrap提供的分欄式柵格系統(tǒng)，通過排方塊的方式布局，通常有很多尺寸的塊讓你挑選，一般提供12欄風(fēng)格。這些方案通常使用float和inline-block的方式實(shí)現(xiàn)，一個(gè)典型的6欄式Grid實(shí)現(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%;
}

不過這些實(shí)現(xiàn)方式都有一定的缺點(diǎ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偽類以及會(huì)導(dǎo)致清除浮動(dòng)后的后遺癥，inline-block有默認(rèn)的空白間隙問題。而flexbox就是為布局而生，很多之前CSS無法解決的問題遇到Flexbox迎刃而解。

使用flexbox來完成柵格系統(tǒng)

如果你還不知道Flexbox是什么，可以看阮老師的Flex 布局教程：語法篇和實(shí)戰(zhàn)篇，語法可能比較枯燥，可以直接看實(shí)戰(zhàn)，然后看到不知道的回頭看語法。布局方面r阮老師參考了Solved by Flexbox ，這篇文章可以用來學(xué)習(xí)有了Flex之后解決的CSS被詬病的問題。

目前我看到的最好的解決方案就是更棒，更簡(jiǎn)潔的柵格系統(tǒng)，以及根據(jù)這篇文章實(shí)現(xiàn)的milligram的柵格系統(tǒng)。這篇文章中作者理想的柵格系統(tǒng)的特性如下:

• 每一行里的每一個(gè)柵格默認(rèn)都是同寬同高。默認(rèn)自適應(yīng)。
• 為了足夠靈活，能夠添加尺寸屬性到單獨(dú)的柵格中。沒有添加的，仍然簡(jiǎn)單地平分剩下的可用空間。
• 支持響應(yīng)式布局，可以添加媒體查詢到柵格中。
• 每一個(gè)柵格可以在純直方向上置頂，置底，劇中。
• 如果讓所有柵格擁有一致的大小和對(duì)其方式，在容器上添加屬性，子元素能夠繼承，而不需要無意義的重復(fù)。
• 柵格能夠任意的嵌套。

容器

容器的作用在于限定網(wǎng)格系統(tǒng)的寬度，通常設(shè)置為100%，一般會(huì)用max-width限定寬度，這里我們用1200p，然后居中，margin auto就好。一個(gè)典型的container如下:

.container{
    margin: 0 auto;
    max-width: 120.0rem;
    padding: 0 2.0rem;
    width: 100%;
}

行Row

既然我們用Flexbox實(shí)現(xiàn)，那么Row就是Flexbox容器，主軸為垂直方向，起點(diǎn)在上沿。

.row {
    display: flex;
}

列Column

 .column {
        display: block;
        flex: 1;
    }

Flex對(duì)齊方式

對(duì)齊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)然少不了對(duì)應(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); }
}