這篇是給未來的自己當備忘錄的 grid 排版筆記。我流重點如下：

• 要佔滿剩下所有的空間時，使用 fr
• 只拿自己需要的空間時，使用 min-content
• 需要明定尺寸範圍時，使用 minmax([保底尺寸], [最大使用尺寸])

範例

需要顯示長文，但設計稿又帶了一些固定高的部位：

See the Pen grid-template layout 1 by Charlie (@Charlie7779) on CodePen.

透過 main 的 grid-template-rows 和 section 的 grid-row: 3 / 4 來做出「並非垂直置中，而是中間偏上」的排版效果：

See the Pen grid template layout 2 by Charlie (@Charlie7779) on CodePen.

參考文件

• MDN CSS grid layout — The fr unit
• MDN CSS min-content
• MDN CSS minmax()
• CSS to Tailwind Converter