前言
当我们在进行网页布局的时候，常常会面临到一个问题，那就是如何让网页元素按照自己的大小适应网页的大小。虽然在 Flexbox 中可以使用 flex 计算容器和子元素的大小关系，然而有时候还是需要更精细的控制，在这时候 CSS Grid 就能发挥作用。在使用 CSS Grid 的时候，我们可以调用 min-content、max-content 和 fit-content 函数，实现自适应网格布局，本篇文章将详细介绍这三个函数的使用。
min-content
min-content 函数可以用来设置网页元素的最小值，其支持的元素类型包括但不限于：文字、图片、表格、媒体等。在设置最小值的时候，如果实际内容的大小小于最小值，则网页元素会根据其实际内容大小调整。如下代码所示：
.container {
display: grid;
grid-template-columns: repeat(2, min-content);
}以上代码中，我们创建了一个 2 列的网格布局，并使用 repeat 函数来定义列的数量。通过指定列的大小为 min-content，当元素的内容小于这个最小值时，列宽会自动调整。例如，当第一列放入一段文字时，列宽会自动适应文字的宽度，而不是统一设置为 min-content 所指定的宽度，从而实现自适应布局。
max-content
“最大”这个词让我们想到“自适应”，而事实上，max-content 函数也是用来实现自适应布局的。max-content 函数可以用来设置网页元素的最大值，并在实际内容的大小超过这个最大值的时候，调整网页元素的大小。这个函数和 min-content 函数效果相反。
.container {
display: grid;
grid-template-columns: repeat(2, max-content);
}在以上代码中，我们同样创建了一个 2 列的网格布局，并使用 repeat 函数来定义列的数量。然而，不同的是我们指定了列的大小为 max-content。在此设置下，如果元素的内容超过了这个最大值，网页元素的大小会自动调整，与 min-content 不一样的是，调整的大小是放大，而不是缩小。
fit-content
函数 fit-content 就是在 min-content 和 max-content 的中间，它可以设置网页元素的大小，但同时不限制实际内容的最大值和最小值。这种方式具有一定的灵活性，可以让网页元素自适应内容的同时又有一定的空间调节余地。
.container {
display: grid;
grid-template-columns: repeat(2, fit-content(50%));
}以上代码中，我们同样创建了一个 2 列的网格布局，并使用 repeat 函数来定义列的数量。然而，不同的是，我们指定了列的大小为 fit-content(50%)，即元素最小宽度为 50%。如此设置下，网页元素会自适应内容的大小，但是它也有一个最小值限制，即 50%。在实际操作中，这个数值可以按照网页的具体要求进行调整。
总结
CSS Grid 是一个可以实现自适应网格布局的强大工具，而 min-content、max-content 和 fit-content 函数的使用，则可以让这个工具更加灵活方便。当我们在进行前端开发时，不妨尝试使用这些函数进行自适应布局的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1a90af6b2d6eab3b7cb79