css - 如何使用 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 (所有换行后的最小列宽)。