HTML中的details标签配合grid网格布局的实例-html教程-PHP中文网

details需在显式定义grid-template-columns的网格容器中才能生效grid-column定位；其open状态会触发布局重排，建议用grid-auto-rows预留空间；summary非grid项目，不可直接定位，内部多列需嵌套新grid容器。

html中的details标签配合grid网格布局的实例

details 标签本身不参与 Grid 布局的轨道计算，但可以作为 Grid 项目正常放置；只要它在网格容器内是直接子元素，就能用 grid-column、grid-row 定位——前提是容器已定义显式行列结构。

根本原因和所有 Grid 项一样：容器没声明 grid-template-columns。即使 details 是语义化折叠组件，它也不会“自动触发”网格线生成。display: grid 只开启上下文，不创建轨道。

必须先写 grid-template-columns: 1fr 2fr 1fr 或 repeat(auto-fit, minmax(240px, 1fr))，否则 grid-column 无效
details 的 open 状态切换会触发布局重排，若内部内容高度突变，可能撑开所在网格行——建议给 details 设 min-height 或用 grid-auto-rows: minmax(60px, auto) 预留弹性空间
别在 details 上设 margin 来对齐，用容器级 gap 统一控制间距

summary 默认是块级，且是 details 的第一个子元素，但它不是 Grid 项目（只是 details 的内部结构）。Grid 定位只作用于 details 本身，不穿透到其子节点。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

若想让 summary 文字右对齐或加图标，直接在 summary 上写 CSS：summary { display: flex; justify-content: space-between; align-items: center; }
不要试图用 grid-column 去定位 summary ——它不在网格上下文中，属性会被忽略
如果 details 内容区（summary 后的文本或元素）需要多列排布，得在内部再套一层 display: grid 容器，而不是依赖外层 Grid “透传”布局能力

把 details 当作可展开卡片放进响应式网格时，auto-fit 和内容高度变化容易引发意外行为。

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 在小屏下可能只剩一列，但若某个 details 展开后高度远超其他项，会导致该行高度被拉高，下方所有行整体下移——这不是 bug，是 Grid 正常行为；可用 align-items: start 让各行独立对齐
Safari 15.4 之前不支持 gap 在 inline-grid 上生效，而 details 默认是块级，所以容器必须是 display: grid，不能为了“内联效果”强行改 inline-grid
用 transition: max-height 模拟展开动画？别这么做。details 原生不支持 CSS 过渡，且 max-height 无法精确匹配动态内容高度；真要动效，得用 JS 监听 toggle 事件 + height: auto + getComputedStyle 测量