使用 CSS Grid 的 minmax()，簡單限制區塊的大小

在使用 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() 來設定區塊的最大及最小高度或寬度了。