使用CSS Grid结合媒体查询或minmax()可解决多栏布局在不同屏幕下的错位问题。首先通过display: grid和grid-template-columns设置三栏布局，适用于桌面端；当屏幕宽度减小至768px以下时，利用媒体查询将列数调整为两栏；在480px以下进一步调整为单栏，避免内容重叠；更灵活的方式是使用repeat(auto-fit, minmax(250px, 1fr))，使网格列根据容器自动适配，最小宽度为250px，空间不足时自动换行减少列数，无需编写多个断点，提升响应式效率与可维护性。
网页多栏布局在不同屏幕宽度下出现错位，通常是因为未对响应式场景做适配。使用 CSS Grid 布局结合媒体查询，可以有效解决这一问题，让页面在各种设备上都能正常显示。
使用 Grid 构建基础多栏布局
Grid 是现代网页布局的强大工具，能轻松实现多列、对齐和间距控制。先为容器设置 display: grid 并定义列宽：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
这样创建了一个三栏等宽布局，适用于桌面端。但在小屏幕上，三栏会挤压导致内容重叠或错位。
通过媒体查询适配不同屏幕
加入媒体查询，在屏幕变窄时调整列数，避免错位：
立即学习“前端免费学习笔记（深入）”；
/* 平板设备 */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
/ 手机设备 /
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
这样在不同尺寸下自动切换为两栏或单栏，内容不会溢出或错位，提升可读性和用户体验。
使用 minmax() 实现更灵活的响应式网格
除了固定断点，可以用 minmax() 让 Grid 自动调整列数：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
每列最小 250px，最大为 1fr。当空间不足时，Grid 自动减少列数，无需写多个媒体查询，更加简洁高效。
基本上就这些。用 Grid 搭建结构，配合媒体查询或 minmax() 控制响应行为，就能有效防止多栏布局在不同屏幕下错位。不复杂但容易忽略细节。
