CSS Grid 筆記 13-Using Minmax() for Responsive Grids

上一篇提到了 auto-fit 與 auto-fill ，此篇就是說明想要達到自適應的表格，還需要搭配 minmax() 這方法

Demo | Github

Using minmax() for Responsive Grids

minmax() 這方法裡面可以放置兩個參數，第一個參數表示最小的設定，第二個則是最大的設定，其示範如此頁最上的動態圖

.container {
    display: grid;
    grid-gap: 20px;
    border: 10px solid var(--yellow);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

接下來介紹另一種情境則是 grid-template-columns 設定固定欄位大小的時候，當某欄想針對其欄位內容進行自動調整，之前提到過可以使用 auto ，但是又想指定其大小的話，則可以使用 fit-content() ，裡面的參數可以放置想指定的大小

.container {
    display: grid;
    grid-gap: 20px;
    border: 10px solid var(--yellow);
    grid-template-columns: fit-content(100px) 150px 150px 150px;
}

線上示範

筆記與備註事項

稍微總結一下

• minmax() 裡面參數設定縮放的尺寸下限與上限
• fit-content() 設定縮放尺寸的上限，就是最大只可以到達設定的尺寸，不會按照內容去 auto 調整

minmax()

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids.
資料來源 - MDN

fit-content()

The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
資料來源 - MDN

參考資料

• CSS-Grid 課程
• 作者 Wes Bos CSS-Grid Github
• 我的 CSS-Grid 練習Github