CSS Grid 布局是一种强大的布局方式，它可以让我们更方便地布局网页的元素。在 Grid 布局中，我们可以使用 minmax() 和 max-content 函数来设置单元格的大小。这两个函数可以让网页元素更加灵活地适应不同的屏幕大小和内容长度。
minmax()函数
minmax() 函数可以设置单元格的最小和最大大小。它的语法如下：
grid-template-columns: minmax(minimum, maximum);
其中，minimum 和 maximum 分别表示单元格的最小和最大大小。我们可以使用像素、百分比或者其他单位来设置这些值。
例如，我们可以使用下面的代码来设置单元格的最小宽度为 200 像素，最大宽度为 1fr：
.grid-container {
display: grid;
grid-template-columns: minmax(200px, 1fr);
}这样，当屏幕宽度小于 200 像素时，单元格的宽度将保持在 200 像素；当屏幕宽度大于等于 200 像素时，单元格的宽度将自动扩展，直到占据剩余的空间。
max-content 函数
max-content 函数可以让单元格的宽度自适应其内容的长度。它的语法如下：
grid-template-columns: max-content;
例如，我们可以使用下面的代码来设置单元格的宽度为其内容的最大宽度：
.grid-container {
display: grid;
grid-template-columns: max-content;
}这样，单元格的宽度将根据其内容的最大宽度自动调整。如果单元格中的内容很长，它将自动换行，以适应单元格的宽度。
示例代码
下面是一个使用 minmax() 和 max-content 函数设置单元格大小的示例代码：
<div class="grid-container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> <div class="item4">Item 4</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ------------- ----- --------- ----- - ------ - ------------ - - -- --------- -- - ------ - ------------ -- --------- - - -- - ------ - ------------ -- --------- -- - ------ - ------------ -- --------- -- ---------------------- ------------ -
在这个示例中，我们使用 minmax() 函数来设置单元格的最小和最大宽度，使用 max-content 函数来让单元格的宽度自适应其内容的长度。
总结
在 CSS Grid 布局中，我们可以使用 minmax() 和 max-content 函数来设置单元格的大小。这些函数可以让网页元素更加灵活地适应不同的屏幕大小和内容长度。在实际开发中，我们可以根据具体的需求来选择合适的函数，以达到最佳的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ff9c73d10417a222ad0a4d