用 CSS Grid 实现响应式 Logo 墙：容器设 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))，图片用 max-width: 100%、height: auto、object-fit: contain，配合 gap、alt 属性、loading="lazy" 及深色模式适配。
用 CSS Grid 实现响应式 Logo 墙，不依赖 JS
纯 HTML + CSS 就能做出对齐整齐、自动换行、适配移动端的合作品牌墙，关键不是用 float 或 inline-block，而是用 display: grid 控制布局。Grid 天然支持等宽列、间距统一、内容居中，且无需计算列数或写媒体查询就能响应式断行。
常见错误是把每个 <img> 包在固定宽高的 <div> 里，结果小屏幕下 logo 挤成一条线或溢出。正确做法是让容器定义网格轨道，子项用 max-width: 100% 和 height: auto 保持比例。
- 容器设
display: grid，用grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))—— 这表示“每项最小 120px，尽可能填满一行，超出就换行” - 每张 logo 图片加
max-width: 100%、height: auto、object-fit: contain（防拉伸） - 用
gap: 1.5rem统一内外边距，比margin更可靠 - 如果品牌数量少但希望铺满整行，可改用
grid-auto-flow: column+grid-template-rows控制行数
处理不同尺寸 Logo 的对齐与留白
合作方给的 logo 尺寸五花八门：有的高宽比 4:1，有的是正方形，有的带透明底，有的带白边。直接丢进 grid 会导致高度不一致、上下错位、视觉松散。
核心思路是统一“视觉容器”，而非强制缩放图片本身。不要用 width/height 硬设，而是用包裹层约束：
立即学习“前端免费学习笔记（深入）”；
- 每个 logo 外包一层
<div class="logo-item">，设固定宽高比（如aspect-ratio: 4 / 1）或最小高度（min-height: 48px） -
<img>设width: 100%、height: 100%、object-fit: contain、object-position: center - 若某 logo 白边过大，用
padding或clip-path微调，但优先让合作方重提供无边距版本 - 避免用
vertical-align或align-items拼凑对齐——Grid 容器上设align-items: center即可垂直居中所有子项
加载慢、SEO 不友好、无障碍缺失的三个补救点
Logo 墙看似静态，但实际常因图片未优化、缺少语义、无加载 fallback 导致体验断裂。尤其当页面首屏含大量 logo 时，LCP（最大内容绘制）会严重拖慢。
- 必须加
loading="lazy"到每个<img>，否则滚动前就全量请求 - 每个
<img>必须有alt属性，值为品牌名称（如alt="GitHub"），不能留空或写“合作品牌 logo”——这是屏幕阅读器唯一识别依据 - 用
<picture>提供 WebP 格式：主<source srcset="logo.webp" type="image/webp">+ 回退<img src="logo.png" ...> - 若某品牌无官网链接，不要强行加
<a>；如有，则<a href="https://..." rel="noopener noreferrer">，避免安全风险
深色模式下 Logo 发灰或看不见怎么办
很多品牌只提供单色 logo（通常是黑底白字或白底黑字），切换系统深色模式后直接糊成一片。这不是 CSS 变量能简单解决的。
真正可行的是用 prefers-color-scheme 媒体查询配合两套图片资源：
- 准备两版 logo：如
brand-light.svg（深色背景用）和brand-dark.svg（浅色背景用） - 用
@media (prefers-color-scheme: dark)切换background-image或content伪元素 - 更稳妥的做法是让 SVG 内联，并在
<svg>中用fill="currentColor"，再通过父级color控制——但前提是品牌允许你修改 SVG 源码 - 最省事但效果有限：对所有 logo 加
filter: brightness(0.9) contrast(1.2)在暗色下微调，不过别过度依赖滤镜，易失真
真正麻烦的是 PNG 位图——它没颜色语义，只能靠人工换图或服务端根据 UA + scheme 动态返回对应资源。这点容易被忽略，直到 QA 在深色模式下截图反馈“全看不清”。
