以 grid-template-columns 來限制最大容器寬

行前說明：這篇文章會直接使用 tailwind v3 的語法來描述 CSS 樣式。

---

最近收到的切版需求如下：

主要內容的容器最寬不超過 600 像素，且此容器需在畫面上水平置中。另外，此容器會有兩個子代元素，呈垂直排列。第一個子元素預期會有大量文字內容，使用者要能捲動此區域；而第二個子元素要帶陰影效果。噢對了，畫面最上方當然會有個導覽列。

第一眼看到稿子想說還不簡單，直接 md:mx-auto md:max-w-[600px] 就好了。殊不知這在子元素同時需要處理「捲動」和「帶陰影效果」時會滑鐵盧——擴散出去的陰影會被 overflow-hidden 裁掉（可參考下方示意圖，或可互動範例）。

一陣沉思後，改用 grid-cols-[1fr,min(100%,600px),1fr] 來處理。這行樣式做的事情是：

1. 將容器切成左中右三個欄
2. min(100%,600px) 代表中間欄的最小寬為 600 像素或滿版寬，亦即在低於 600 像素的小裝置時，中間欄可以享用整個裝置的寬度，但在裝置超過 600 像素後，此容器至多只能佔用 600 像素（由 Adam Argyle 的文章 3 Unintuitive CSS Layout “Solutions” 啟發）
3. 剩下的空間透過 1fr 均分給左右欄（這個寫法印象是從 Kevin Powell 的頻道看到的）

沒有 max-w-[600px] 後，陰影效果就沒有被裁掉的問題了：

See the Pen grid col span by Charlie (@Charlie7779) on CodePen.

搞定。