Tailwind CSS：如何实现列宽自适应内容且响应式堆叠的网格？

你只需要给Tailwind类加上响应式断点，让小屏幕下自动切换成垂直堆叠的布局就行，修改后的InlineGrid组件代码如下：

export const InlineGrid = ({ children }: PropsWithChildren) => (
    <div className="grid gap-4 md:grid-flow-col md:gap-x-4 md:auto-cols-max">{children}</div>
);

关键改动说明： #

• 移除固定的grid-flow-col，改用md:grid-flow-col：只有在中等屏幕及以上（Tailwind默认md断点为768px）才会采用横向列布局，小屏幕下自动使用Grid默认的垂直行流布局，内容会堆叠排列
• 将gap-x-4改为gap-4 md:gap-x-4：小屏幕下给内容添加上下左右间距，大屏下仅保留左右间距，适配不同布局的视觉需求
• 给auto-cols-max加上md:前缀：仅在大屏下让列仅占据自身内容宽度，小屏幕下列会自动充满容器宽度，保证堆叠时的排版整洁

使用方式不变 #

你原来的组件调用代码不需要任何修改，当屏幕宽度小于768px时，这些标签会自动垂直堆叠，不会再强行挤在一行里。如果需要自定义断点（比如想在更小的屏幕才触发堆叠），可以把md:换成sm:（640px）或者lg:（1024px），按需调整即可。

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