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