gap仅在Grid或Flex容器上生效，普通div设置无效；Grid方案用auto-fill和minmax实现响应式Logo墙，gap控制行列间距，图片需设max-width:100%和height:auto。

gap 只在 Grid 或 Flex 容器上生效，别往普通 div 里硬塞

很多人把 gap 当成“通用间距工具”，给一个普通 <div> 加 <code>gap: 12px，刷新页面没反应——因为 gap 不是 CSS 全局属性，它只对 display: grid 或 display: flex 的容器起作用。合作伙伴 Logo 墙必须先明确布局模型，否则 gap 永远不会生效。

用 Grid 实现响应式 Logo 墙：列数自动、不写媒体查询

Grid 是目前最干净的方案，不用计算列数、不用手写断点。核心就三行：

.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

• auto-fill 让浏览器尽可能多放列，空余空间均分；minmax(120px, 1fr) 表示每列最小 120px、最大等宽占满剩余空间
• gap: 16px 同时控制行距和列距；若需不对称（比如行距小、列距大），改用 row-gap: 8px; column-gap: 24px
• 所有 <img alt="HTML合作伙伴布局怎么用gap展示品牌标志" > 必须设 max-width: 100% 和 height: auto，否则缩放会拉伸变形；加 object-fit: contain 更稳妥

Flex 布局也能做，但换行逻辑更难控

Flex 可以实现单行滚动或固定列数，但“自动换行+等宽+填满”不如 Grid 直观。如果坚持用 Flex：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 容器设 display: flex; flex-wrap: wrap; justify-content: center;
• 每个 Logo 项设 flex: 1 1 120px（即允许缩放、基础宽度 120px）
• gap 在 Flex 中同样生效，但要注意：Flex 的 gap 是主轴+交叉轴统一作用，而 Grid 中行列可独立控制
• 首尾留白需靠 padding，gap 不影响子项与容器边缘的距离

常见翻车点：图片尺寸、alt 属性、懒加载漏掉

Logo 墙不是摆设，要兼顾语义、性能和可访问性：

立即学习“前端免费学习笔记（深入）”；

• 每个 <img alt="HTML合作伙伴布局怎么用gap展示品牌标志" > 必须带 alt 属性，哪怕只是 alt="Apple"；空 alt="" 会让屏幕阅读器跳过
• 加 loading="lazy" 防止首屏卡顿，尤其当 Logo 数量 >12 时效果明显
• 深色模式下 Logo 若是纯白底黑字，可能看不清；建议用 picture + media="(prefers-color-scheme: dark)" 切换版本，或直接用 SVG 并设 fill: currentColor
• 别用 width/height 固定像素值，否则在高 DPR 设备（如 Retina）上模糊；优先用 max-width + height: auto

实际项目中，Grid 方案的容错率更高，Flex 更适合需要横向滚动或动画介入的场景。真正容易被忽略的，是 gap 对首尾项完全无效这点——很多开发者调了半天发现左边贴边、右边也贴边，最后才想起得手动加 padding。