CSS Grid 是一种高度灵活的布局系统，它可以轻松地为网格中的项目分配大小和位置。在实现响应式网格布局时，经常需要对元素的宽度进行限制和调整。 CSS Grid 中的 minmax 函数为这种情况提供了一个简单而强大的解决方案。
minmax 函数的语法
minmax 函数接受两个参数：最小值和最大值。 它的语法如下：
minmax(minimum, maximum)
其中 minimum 表示元素能够达到的最小宽度，maximum 表示元素能够达到的最大宽度。可以使用任何适当的长度单位，例如像素、百分比或视窗单位。
下面是一个示例：
grid-template-columns: minmax(200px, 1fr) 1fr;
在示例中，第一列将以最小为 200px，最大为 1fr (一份可用空间) 作为宽度。 第二列将使用 1fr 直到容器的可用宽度小于 200px 为止。
响应式布局示例
让我们看一个实际的响应式布局示例。 假设您要创建一个具有两个并排列出的栏目，左侧栏目的宽度为固定的最小值，但可以自由增长，右侧栏目可以扩展到剩余的容器宽度。您可以像下面这样使用 minmax 函数：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ------------- ---- ---- --------- ----- - ------------ - -- ------- -- ---------- ------ - ------------- - -- ------------------ -- -展开代码
在这个例子中，左侧栏的最小宽度为200px，如果容器宽度大于400px，则右侧栏将增长以填充可用空间。 如果容器宽度小于 400px，右侧栏会自动适应，直到左侧栏和右侧栏列的总宽度小于容器宽度为止。
总结
使用 minmax 函数可以很容易地实现响应式布局，给元素设置一个最小和最大宽度范围，可以使 Grid 布局更加灵活和强大。 通过该函数的运用，我们可以轻松实现自适应的布局，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499046748841e98945f6a03
