CSS Grid搭配auto-fit+minmax()比flex-wrap更稳定，因Grid能自动收缩空列、避免错行与间隙不均，而flex-wrap在图片尺寸不一或动态加载时易导致最后一行单图、间距突兀、高度塌陷。
直接用 CSS Grid 搭配 minmax() + auto-fit，比 Flexbox 更稳、更少意外断行——尤其当图片宽高比不一致或动态加载时。
为什么不用 flex-wrap 做图片双栏
flex-wrap 在图片尺寸不齐、异步加载或字体渲染延迟时容易错行：最后一行只有一张图、左右间距突兀、容器高度塌陷。这不是 bug，是 flex 主轴“尽力填满”逻辑的必然表现。
- 图片没设
flex-basis或min-width时，浏览器按内容宽度收缩，导致列数不可控 -
justify-content: space-between在单行只剩一张图时会把它推到最右，破坏视觉平衡 - 无法约束“每张图至少占多少空间”，小屏下可能挤成一列但图被压扁
Grid 双栏的核心写法（带断点）
真正能响应式双栏的关键不是“两列”，而是“最小宽度达标就自动加列，否则退为单列”。grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 是起点，再加媒体查询收口：
- 桌面端（≥1024px）：
grid-template-columns: repeat(2, 1fr)强制等宽双栏，避免过宽容器拉出三列 - 平板（768px–1023px）：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))允许自适应，但通常刚好两列 - 手机（≤767px）：
grid-template-columns: 1fr强制单列，避免横向滚动
别漏掉 gap ——用 gap: 16px，不是 margin。后者会让 figure 的语义结构在网格中错位。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
图片本身怎么不拉伸、不变形
两张图并排时，如果原始尺寸差异大，光靠 width: 100% 会拉伸或留白。必须组合控制：
- 给
img加object-fit: cover+object-position: center，裁剪居中显示 - 父容器（如
figure）设aspect-ratio: 4/3，强制统一高宽比；不支持的旧浏览器 fallback 到padding-top: 75%+position: relative+img绝对定位 - 禁用
height: auto的隐式行为——显式写height: 100%并确保父级有高度约束
srcset 和 media 怎么配合双栏布局
<picture> 的 <source> 的 media 属性只决定“哪套图源生效”，和 CSS 断点无关；它和 srcset 是分工关系：
- 宽屏双栏用横构图大图：
<source media="(min-width: 1024px)" srcset="hero-wide-1200.jpg 1x, hero-wide-2400.jpg 2x"> - 窄屏单列用竖构图小图：
<source media="(max-width: 767px)" srcset="hero-portrait-600.jpg 1x, hero-portrait-1200.jpg 2x"> -
<img>的sizes必须写，比如sizes="(min-width: 1024px) 48vw, 100vw"，告诉浏览器“双栏时这张图占视口 48%，单栏时占 100%”
顺序错了、括号漏了、<img> 缺 src，都会静默 fallback 到 img.src，连报错都没有——得靠 Network 面板确认最终加载的是哪个地址。
双栏布局真正的复杂点不在 CSS 写法，而在于图片资源维度（构图方向、分辨率、宽高比）和容器维度（断点、间隙、对齐）必须同步设计。漏掉任一环，都会在某台设备上出现错位、裁剪异常或加载低质图。
