CSS Grid 提供了一种强大的布局方式，允许我们定义网格行和列来实现复杂的布局设计。在进行网格布局的时候，我们通常会指定网格的行高和列宽，但是有时候我们希望网格的列宽可以自适应内容的宽度。这时候就可以使用 CSS Grid 中的 “grid-auto-columns” 属性来实现。
“grid-auto-columns” 属性
“grid-auto-columns” 属性定义了在网格容器中没有被显式指定的列的列宽。默认情况下，“grid-auto-columns” 的值为 “auto”，这意味着未被指定的列宽会根据其内容自动调整。但是如果我们希望网格的列宽可以自适应指定的最大值或最小值，我们也可以设置一个具体的值。
自适应列宽示例
我们来看一个简单的示例，展示如何使用 “grid-auto-columns” 来实现自适应列宽。
<div class="container"> <div class="item">这是一段很短的文本。</div> <div class="item">这是一段很长很长很长的文本。</div> <div class="item">这是一段中等长度的文本。</div> <div class="item">这是另外一段很长很长很长的文本。</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------ ------------- ------ ---- ----- - ----- - ----------------- ----- -------- ----- -
在上面的示例中，我们给网格容器设置了四个等宽的列，并且将 “grid-auto-columns” 属性设置为 “minmax(100px, auto)”。这意味着未被指定列宽的列，至少会有 100 像素的最小宽度，并且在容器宽度足够的情况下会自动扩展到容器宽度减去列的固定宽度之后的宽度。这样就可以让网格的列宽自适应内容的宽度。
总结
使用 “grid-auto-columns” 这个属性可以让网格的列宽自适应容器和内容，并且可以控制自适应宽度的最小和最大宽度。在进行网格布局时，这个属性可以帮助我们更方便地创建自适应的布局设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b400a48841e989481ba21