各框架中大火的网格布局，使用简单的css也能实现相同的功能。本文主要讲述css网格布局之minmax()，通过阅读本文后，能让你了解minmax()的强大和实用，并能灵活使用minmax()布局，让页面更优雅的呈现给用户。

Minmax()介绍

我们先看一个简单的案例：

<!DOCTYPE html>
<html>
<head>
  <title>minmax</title>
  <meta charset="utf-8" />
  <style>
    .box {
      border-radius: 8px;
      height: 100px;
    }
    .box-one {
      background-color: bisque;
    }
    .box-two {
      background-color: lightgreen;
    }
    .box-three {
      background-color: lightsalmon;
    }
    .o-grid {
      display: grid;
      grid-template-columns: minmax(200px, 500px) 1fr 1fr;
      grid-gap: 1rem;
    }
  </style>
</head>
<body>
  <div class="o-grid">
    <div class="box box-one"></div>
    <div class="box box-two"></div>
    <div class="box box-three"></div>
  </div>
</body>
</html>

简单的案例分析：

布局有三列
第一列的宽度minmax(200px, 500px)，最小值是200，最大值是500
后面两列的宽度为1fr，意味着他们等分剩余的空间

minmax（min，max）的定义如下：

定义一个大小范围，该范围大于或等于最小值，小于或等于最大值。

语法

minmax（min，max）函数包含两个参数，最小值和最大值.

每个参数分别是 <length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

注意：

1、最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。

2、<flex> 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

3、minmax()与CSS网格布局一起使用

例如：

minmax(500px, 200px) 1fr 1fr  // 200px被忽略，最小值为500px
minmax(1fr, 200px) 1fr 1fr    // 无效

回顾案例，在普通的PC浏览器上，这个布局是OK的。想象一下，假如我们把他放到小屏幕或者手机端时，会出现什么问题呢？当屏幕小于容器的宽度时，就会出现横向滚动条，这对手机端用户来说，就是十分不友好的交互了，没有人愿意在手机页面去滑横向滚动条。

最小值搭配0使用

如果我们使用最小值0，minmax(0, 500px)，宽度范围在0-500px，当窗口宽度不够时，各列的列宽会进行自动调整。

搭配repeat()函数使用

案例：等分三列

实现方法：

.o-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
  grid-gap: 1rem;
}

使用repeat()函数

.o-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-gap: 1rem;
}

当窗口小于最小宽度时，以上方法会出现滚动条，可以使用minmax(0,xxpx)解决滚动条问题。当我们列有固定宽度需求时，在窗口小于实际宽度时，如何避免横向滚动条出现？

小屏幕下展示以上案例

使用auto-fit

.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

使用`auto-fill` 或者 `auto-fit`关键字

当窗口小于等于实际宽度时，auto-fit和auto-fill效果没有差别
当窗口大于实际宽度时，auto-fit会自适应屏幕大小，auto-fill不会自适应屏幕大小。

使用min()函数

当窗口小于实际宽度时，出现横向滚动条

使用min()函数作为minmax()函数的第一个值,可以解决小屏幕下横向滚动条问题

如果窗口宽度小于等于实际宽度时，第一个值取min的最小值
如果窗口大于实际宽度时，第一个值取min的最大值

.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  grid-gap: 1rem;
}

深入了解css网格布局之minmax()