使用Flex或Grid布局可解决小屏幕下多列挤在一起的问题。1. Flex方案：设置display: flex和flex-wrap: wrap，子项设flex: 1 1 300px实现最小宽度与换行；2. Grid方案：使用display: grid和grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，自动适配列数。推荐优先采用Grid，更简洁高效。
当使用CSS多列布局时，在小屏幕下内容挤在一起，通常是因为容器没有根据屏幕尺寸调整排列方式。解决这个问题的关键是让子元素在空间不足时自动换行。可以通过 flex-wrap 或 Grid 布局轻松实现响应式换行。
使用 Flex 布局 + flex-wrap 换行
将父容器设为 flex 并启用换行，子项会在宽度不够时自动折行显示。
说明：- 设置 display: flex 启用弹性布局
- 添加 flex-wrap: wrap 允许子元素换行
- 给子元素设置最大宽度（如 flex: 0 0 30% 或 max-width），避免强行撑开
示例代码：
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
<p>.item {
flex: 1 1 300px; /<em> 最小宽度约300px，可伸缩 </em>/
}</p>这样在小屏幕上，每个项目最小为300px，超出容器时会自动换行，不会挤压在一起。
立即学习“前端免费学习笔记（深入）”；
使用 CSS Grid 自动换行
Grid 布局更现代，适合多列响应式设计，通过 minmax() 和 auto-fit 实现智能换行。
说明：- 使用 display: grid
- 配合 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
- 浏览器会自动计算每行能放多少列，空间不足就换行
示例代码：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
这种方式无需媒体查询，就能在手机、平板、桌面等不同设备上自适应排列。
基本上就这些。无论是用 Flex 的 flex-wrap 还是 Grid 的 auto-fit + minmax，都能有效避免小屏幕下多列挤成一团的问题。推荐优先使用 Grid 方案，更简洁且维护性更强。
