如果你已经掌握了 CSS Grid 布局基础知识，那么你应该知道如何使用 grid-template-columns 属性来定义网格列的数量和宽度。但是，当我们需要让列宽自适应内容时，就需要一些进阶技巧了。
列宽自适应问题
在使用 CSS Grid 布局时，我们可能会遇到这样的情况：某些列的宽度应该根据内容自适应，而其他列的宽度应该固定为某个值。
比如，我们有一个表格，其中一列是商品名称，另一列是价格。商品名称的长度不确定，但价格的宽度应该固定为 100px。如何实现这个布局？
解决方案
使用 minmax() 函数
CSS Grid 布局提供了一个 minmax() 函数，可以在定义网格列宽度时使用。这个函数接受两个参数，第一个参数是最小宽度，第二个参数是最大宽度。
我们可以将价格列的宽度设置为 minmax(100px, auto)，这样它的最小宽度为 100px，最大宽度为自适应。商品名称列的宽度可以设置为 auto，这样它的宽度将自适应内容。
.grid {
display: grid;
grid-template-columns: minmax(100px, auto) auto;
}使用 fr 单位
另一种解决方案是使用 fr 单位。fr 单位指网格容器剩余空间的一部分。例如，如果我们有一个网格容器，宽度为 300px，其中定义了两列，第一列的宽度为 1fr，第二列的宽度为 2fr，那么第一列的宽度将是 100px（即 1/3 * 300px），第二列的宽度将是 200px（即 2/3 * 300px）。
我们可以将价格列的宽度设置为 1fr，将商品名称列的宽度设置为 auto。这样价格列的宽度将占据网格容器的一部分，剩余的空间将自适应商品名称列的内容。
.grid {
display: grid;
grid-template-columns: 1fr auto;
}示例代码
下面是一个完整的示例代码，演示了如何使用 minmax() 函数和 fr 单位来解决列宽自适应问题。
-- -------------------- ---- ------- ---- ------------- ---- ----------------------- ---- --------------------- ---- ------------------- -- --- --------- ---- ------------------------ ---- ----------------- --------- ---- ----------------------- ---- -------------------- --------- ---- ------------------------ ------
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- ------------- ----- ---- - ----- - -------- ----- ------- --- ----- ----- -
总结
在 CSS Grid 布局中，我们可以使用 minmax() 函数和 fr 单位来解决列宽自适应的问题。这些技巧可以帮助我们更好地掌控网格布局，实现更灵活的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66025b84d10417a222de92c0