Tailwind CSS自适应网格求助：数字网格适配多屏幕尺寸

问题原因 #

你之前使用的grid-flow-col类会强制元素按列方向排列，不会自动换行，导致所有数字挤在一行，无法适配不同屏幕尺寸。

正确的Tailwind CSS类方案 #

要实现根据屏幕尺寸自动调整行列数的网格，有两种常用方式：

方式1：固定响应式列数

结合Tailwind的断点前缀（sm:/md:/lg:），为不同屏幕设置固定列数：

• 移动端（小屏）：grid-cols-3（每行3个数字）
• 平板（中屏）：md:grid-cols-6（每行6个数字）
• PC（大屏）：lg:grid-cols-9（每行9个数字）

修改后的代码示例：

<div class="grid gap-2 grid-cols-3 md:grid-cols-6 lg:grid-cols-9">
  <div>03</div>
  <div>03</div>
  <div>03</div>
  <!-- 剩余所有数字元素 -->
</div>

方式2：自动适配列数（更灵活）

使用grid-cols-[repeat(auto-fit,minmax(3rem,1fr))]，让网格根据屏幕宽度自动计算列数，每个数字容器最小宽度为3rem，超出后自动换行：

修改后的代码示例：

<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(3rem,1fr))]">
  <div>03</div>
  <div>03</div>
  <div>03</div>
  <!-- 剩余所有数字元素 -->
</div>

关键说明 #

• 必须移除grid-flow-col，默认的grid-flow-row才会让元素按行排列并自动换行。
• gap-2可以保留，用于设置网格元素之间的间距。

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