[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%