如何使用CSS网格制作30个自动宽度列？

Question

我之前从未使用过CSS Grid，所以如果这是一个简单的问题，请原谅。我需要创建一个30列宽的网格 - 自动宽度，可以使用浏览器窗口或父div进行调整。我已经阅读了文档，但我似乎无法找到只创建x个自动宽度列的代码。我怎么能做到这一点？

Answer 1

.grid-container {
   display: grid;
   grid-template-columns: repeat(30, 1fr);
}

该代码创建一个包含30列的网格容器，每列都有一行equal proportion of the free space。您也可以尝试将1fr替换为auto（内容宽度）或min-content（所有换行符后的最小列宽）。