html自定义元素本身无响应式能力，仅是语义化容器；需显式设置display: grid等css规则才能生效，且box-sizing应设为border-box以避免布局异常。
HTML 自定义元素本身不提供响应式能力，它只是语义化容器；真正起作用的是你给它加的 CSS Grid 或 Flexbox 规则。 直接用 <my-grid></my-grid> 标签但不写 CSS，页面不会自动适配任何屏幕。
自定义元素必须配合 display: grid 才能生效
浏览器把自定义元素当普通标签处理，它默认是 display: inline，既不占满行也不自动换列。想让它变成网格容器，得显式声明：
- 必须在 CSS 中为该元素设置
display: grid，否则grid-template-columns等属性全无效 - 不能只靠 JS 定义元素就指望样式自动继承——JS 定义的是行为，样式要单独写
- 若用 Shadow DOM 封装样式，需确保
:host里写了display: grid，否则内部 grid 规则对外部无影响
minmax() 在自定义元素里写法和普通 div 完全一样
常见错误是以为自定义标签要特殊写法，其实只要父容器启用了 grid，规则照常生效：
- 正确：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) - 错误：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))写在子元素上（应写在自定义元素自身） - 注意：如果自定义元素设了
width: 100%但父容器没设宽度，minmax()的计算基准会塌缩，导致列宽异常 - Safari 15.4 之前不支持
gap在inline-grid上生效，所以别给自定义元素设display: inline-grid，一律用display: grid
自定义元素 + 媒体查询的断点控制要分层写
别在每个自定义元素里重复写媒体查询，而是按层级组织：
- 基础网格逻辑写在自定义元素默认样式里，例如
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) - 关键断点（如 768px 改为两列、480px 强制单列）统一写在外部 CSS 中，选择器用
my-grid即可 - 避免在 JS 中动态改
style.gridTemplateColumns——难维护、易出竞态，CSS 媒体查询更可靠 - 如果自定义元素内嵌了卡片内容，卡片 hover 导致跳动，根源不在自定义标签，而在卡片没设
min-height或用了margin而非gap
真正容易被忽略的点：自定义元素的 box-sizing 默认是 content-box，而 gap 和 padding 叠加时可能挤压内容；务必全局或在自定义元素上加 box-sizing: border-box。另外，auto-fit 和 auto-fill 行为差异在自定义元素里完全一致，选错只会让空列留白或消失，跟标签名无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
