在使用 CSS Grid 排版時,可以透過其 minmax() 來設定區塊的最大與最小值,比如我現在先準備一個 html 如下:
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
接著將其設定成 display grid:
.container{ max-width: 800px; display: grid; margin: 0 auto; grid-template-columns: repeat(3, 1fr); }
本來如果沒有設定 row 的高度,其每一行的高度會跟內容一樣高,像是:
接著加入 maxmin() 來去設定其最大及最小值,我這邊設定最小值為 100px,最大值可以設定為 auto 讓內容把他撐開:
.container{ max-width: 800px; display: grid; margin: 0 auto; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); }
如果設定多個值,則會依序設定每行的高度:
.container{ max-width: 800px; display: grid; margin: 0 auto; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto) minmax(60px, auto); }
如此我們便可以 minmax() 來設定區塊的最大及最小高度或寬度了。