從手機版開始

還記得昨天的狀況嗎?那個 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 的尺寸改變的情況下,你有可能會拿到可能不是你想要的結果,這一點必須特別留意。