使用Tailwind CSS的Grid间距过大，求紧凑布局且保持居中的方案

问题分析 #

你当前代码里的auto-cols-[repeat(auto-fit,_16.666666%)]用法有误——repeat(auto-fit, ...)是grid-template-columns的专属语法，放到auto-cols里完全无效，这才导致布局间距过大、无法按预期自适应。用auto-cols-max虽然能缩小间距，但丢失了居中对齐的关键配置。

可行解决方案 #

方案1：修正Grid列定义，兼顾紧凑与居中

把错误的auto-cols配置替换成grid-template-columns，同时补充居中规则，确保内容对齐到标题下方：

<div class="grid grid-flow-col grid-template-columns-[repeat(auto-fit,minmax(100px,16.666666%))] gap-x-3 px-20 mt-28 mb-20 text-xs justify-items-center mx-auto">
  content
</div>

• grid-template-columns-[repeat(auto-fit,minmax(100px,16.666666%))]：让列自适应容器宽度，最小宽度设为100px（可按需调整），最大占1/6宽度，实现紧凑布局
• justify-items-center：让每列内容水平居中
• mx-auto：让Grid容器本身在父元素中居中，对齐上方的“Roadmap”标题

方案2：适配auto-cols-max的居中调整

如果坚持用auto-cols-max，需要补充容器居中内容的规则：

<div class="grid grid-flow-col auto-cols-max gap-x-3 px-20 mt-28 mb-20 text-xs justify-content-center mx-auto">
  content
</div>

• justify-content-center：让所有列整体在Grid容器内居中排列
• mx-auto：确保Grid容器和标题的水平对齐一致
• 缩小gap-x的值（比如从5改成3）可进一步紧凑布局

额外优化建议 #

• 可以把px-20换成max-w-[你的标题容器宽度] px-4，让Grid容器的最大宽度和标题保持一致，对齐更精准
• 根据内容长度调整minmax里的最小宽度值，避免内容换行或溢出

内容的提问来源于stack exchange，提问作者Kirnath