[12th 鐵人賽] 實際操作 Part 4, Day 22

從手機版開始

還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度 _剛好一樣_，如果是的話，就不會有昨天那個情況。

差別在於那個 grid-template-column 基本上不會計算 grid-gap 的尺寸，所以當你用百分比定義的時候，他是參考整個容器的尺寸來做定義，所以，你就算設定加起來剛好，還是會因為 grid-gap 的關係然後爆掉。

當然是有解法的，

grid-template-columns: repeat(auto-fit, [body] calc((100% - 2rem) / 3) [end]);
grid-gap: 2rem;

但是，對於手機版而言，或是小尺寸的行動裝置來說，一開始理論上應該是 100%，然後才是慢慢的往上縮小。這個時候你就能慢慢定義你的區塊數量。

往上延伸

剛剛說到了 慢慢定義 基本上就是，

@media (min-width: 76.8rem) {
    .grid {
        grid-template-columns: repeat(auto-fit, [body] calc((100% - 2rem) / 3) [end]);
    }
}

@media (min-width: 133.6rem) {
    .grid {
        grid-template-columns: repeat(auto-fit, [body] calc((100% - 3rem) / 4) [end]);
    }
}

你有沒有發現，當你的欄數越多，你要扣掉的 grid-gap 就會一樣往上增加，這個是必須要留意的地方。如果你忘記數到 grid-gap 數量，他一樣就是爆掉給你看。

這樣是不是很麻煩？對喔，這等於是使用 Grid 的必要之惡，如果是換成 Flex 的話，這個百分比就相當好用，基本上只需要，

.grid {
    display: flex;
    flex-flow: row wrap;
}
.grid .card {
    max-width: 33.33%;
    flex: 0 0 33.33%;
}

這樣他就會 3 個一行來排列，這也是 Bootstrap 在使用 Flex 的方式（有興趣的人可以看看 col- 系列的樣式設定）。所以，當 Flex 需要 4 個一行的時候，也只需要做這樣的處理，

.grid .card {
    max-width: 25%;
    flex: 0 0 25%;
}

但是，由於 Flex 沒有像是 grid-gap 這樣的設計，所以你必須自己保留間距。而，對於 Flex 來說，你也必須設定多組樣式，來決定你的一行要顯示 幾個 區塊。相較於我們最初的 Grid 的設計來說，他是自動的，這是比較大的差異。

我們再回頭看看，

.grid {
    grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]);
}

所以說那個手機版

自動的雖然沒什麼不好，但是這邊有一個雷，來，我先展示行動裝置寬度在 768px 的樣子，

然後這個是比剛剛 768px 再小一點，大概是 680px 左右，

為何會發生這種事情？

因為側邊欄位往上移動，主要區塊瀏覽器的計算跟你說放得下，就變兩個了。

換句話說，你的 @media 調整版面的那些動作，是會影響到自動計算的結果的，因為主要容器 .context-wrapper 的尺寸改變的情況下，你有可能會拿到可能不是你想要的結果，這一點必須特別留意。