用grid实现三栏等宽自适应图片布局最直接：容器设display: grid和grid-template-columns: repeat(3, 1fr)，加gap控制间距；图片设width: 100%; height: auto;，配合srcset/sizes（如sizes="(min-width: 769px) 33vw, 100vw"）和object-fit确保响应与比例一致。
用 grid 实现三栏等宽且自适应图片布局最直接
不用浮动、不用 Flex 模拟列宽，grid 是目前写响应式三栏等宽布局最可控的方式。关键不是“图片怎么响应”，而是“容器怎么分栏”——图片只是填进去的内容。
常见错误是给 img 加 width: 100% 就以为完事，结果在小屏上三栏挤成一列但图片拉伸变形，或留白错位。根本原因是没约束容器的列行为。
- 用
display: grid+grid-template-columns: repeat(3, 1fr)强制三等分，不依赖内容宽度 - 加
gap控制间距，比用margin更稳定（避免外边距合并或塌陷） - 每张图用
width: 100%; height: auto;，确保不溢出格子且保持宽高比 - 在小屏下用媒体查询切为单列：
@media (max-width: 768px) { grid-template-columns: 1fr; }
srcset 和 sizes 必须配对使用，否则等于没写
只写 srcset 不写 sizes，浏览器无法判断当前布局中图片容器多宽，会默认按视口宽度选图，大概率加载过大资源。三栏布局下，每张图在桌面端占约 33vw，这个值必须显式告诉浏览器。
示例写法：
立即学习“前端免费学习笔记（深入）”；
<img
src="photo-320.jpg"
srcset="photo-320.jpg 320w,
photo-640.jpg 640w,
photo-960.jpg 960w"
sizes="(min-width: 769px) 33vw, 100vw"
alt="描述">
-
sizes中33vw对应三栏时每张图理论宽度（含 gap 可微调为32vw），100vw对应移动端单列 -
srcset的w单位是“像素宽度”，不是文件大小，必须和实际图片分辨率一致 - 别用
x描述符（如2x）——它只适配设备像素比，不解决布局变化带来的尺寸需求
图片本身宽高比不一致时，object-fit 是补救关键
三栏布局里混入人像、横幅、方形图，原始比例不同，仅靠 width: 100% 会导致高度参差、网格错位。这时候不能靠 JS 算高，而要用 CSS 原生控制裁剪或缩放。
- 统一高度：给图片父容器设固定高（如
aspect-ratio: 4/3），再配object-fit: cover裁剪居中 - 保留完整内容：用
object-fit: contain，但需配合background-color防空白（尤其深色背景） - 禁止用
height: 100%直接设死——父容器高度未定义时会失效 -
object-position可微调裁剪焦点，比如object-position: center 20%把人脸往上提一点
IE11 兼容场景下，grid 回退方案要精简
如果真要支持 IE11，别试图用 float 模拟三栏——calc(100% / 3) 在 IE 里计算精度差，容易最后一栏换行。更稳的方式是放弃“严格等宽”，改用 inline-block + 百分比 + 字体大小清零。
- 父容器设
font-size: 0，子项设font-size: 16px防止 inline-block 间隙 - 每个图片容器
width: 33.3333%，vertical-align: top防底部空白 - 图片仍用
width: 100%; height: auto;，srcset在 IE11 中被忽略，所以得准备一张足够大的主图 - 别引入 Flexbox 回退——IE11 的 Flex 实现有严重 bug，尤其在嵌套或百分比场景下
真正难处理的不是代码写法，而是设计侧没给定最小可接受图片尺寸和宽高比范围；一旦运营上传一张 200×2000 的竖图，再好的 CSS 也救不了网格结构。
