欢迎关注路条编程网站，通过学习 CSS Grid 网格布局这一系列文章，你将会逐步掌握网格布局的容器和项目、行和列、单元格、网络线等相关的知识。
使用 minmax 函数限制行列模板最大最小尺寸。
内置函数 minmax 可以用于设置 grid-template-columns 和 grid-template-rows 的值。minmax 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为行或列的最小值和最大值。它的作用是在网格容器改变大小时限制网格项目的最大最小值边界。
语法示例如下所示：
<style type="text/css">.container {grid-template-rows: minmax(100px, 1fr);grid-template-columns: minmax(auto, 50%) 1fr 3em;}</style>
长度值可以是 auto ，表示行列模板尺寸可以根据内容大小进行伸长或收缩。
以上代码 grid-template-rows 属性表示第一行最小高度设置为 100px ，最大高度设置为 1fr ，表示行高可以根据内容伸长超过 100px 。
grid-template-columns 属性表示第一列宽度的最大值设置成 50% ，表示其宽度不能超过整个容器宽度的 50%。第二列为第一列及第三宽度后的剩余空间，第三列为固定宽度，宽度为 3em。
调整页面框架模块 5 内容，增加包含 9 个项目的容器，容器分为 3 行 3 列， 第一行属性通过 minmax 函数设置如上示例所示，第二、三行为自动设置。第一列属性通过 minmax 函数设置为 minmax(auto, 50%) ， 第二列为 1fr, 第三列为 3em。
保存页面代码，预览页面，整体效果图如下所示：
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
