HTML自定义元素无内置响应式能力，需显式设置display: grid、box-sizing: border-box及媒体查询等样式规则；其默认display为inline且box-sizing为content-box，必须手动修正才能正确实现网格布局。
HTML自定义元素本身不带响应式能力，它只是语义化容器；真正起作用的是你给它加的 display: grid 或 display: flex 规则，以及配套的媒体查询和盒模型设置。
自定义元素必须显式设为 grid 容器才生效
浏览器把 <my-grid> 当普通标签处理，默认是 display: inline，既不占满行也不自动换列。想让它变成网格容器，必须在 CSS 中明确声明：
-
my-grid { display: grid; }—— 缺了这句，grid-template-columns等所有网格属性全无效 - 别指望 JS 定义了自定义元素就能继承布局行为；JS 控制的是逻辑，样式要单独写
- 如果用了 Shadow DOM，得在
:host里写display: grid，否则内部规则对外部无影响 - 常见错误：把
grid-template-columns写在子元素上（比如my-grid > div），其实它该写在my-grid自身
minmax() 和 auto-fit 在自定义元素里写法完全一样
minmax() 不因标签名改变语法，但计算基准容易出问题：
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) - 如果
my-grid设了width: 100%，但父容器没设宽度，minmax()的“可用空间”会塌缩，导致列宽异常甚至只显示一列 -
auto-fit会收缩空轨道，auto-fill会保留空轨道——选错只影响留白，跟是否自定义元素无关 - Safari 15.4 之前不支持
gap在inline-grid上生效，所以一律用display: grid，别碰inline-grid
媒体查询要分层组织，别堆在 JS 里
断点控制不能靠 JS 动态改 style.gridTemplateColumns，太难维护且易出竞态：
立即学习“前端免费学习笔记（深入）”；
- 基础网格逻辑写在自定义元素默认样式里，例如：
my-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } - 关键断点统一写在外部 CSS，选择器直接用
my-grid：@media (max-width: 768px) { my-grid { grid-template-columns: 1fr; } } - 避免每个组件实例都重复写媒体查询；按层级复用，而不是按标签复制
- 如果自定义元素内嵌卡片，hover 跳动不是标签的问题，而是卡片缺
min-height或用了margin而非gap
box-sizing: border-box 是最容易被忽略的硬性要求
自定义元素默认是 box-sizing: content-box，而 gap 和 padding 叠加时会挤压内容区域：
- 务必全局或至少在自定义元素上加：
my-grid { box-sizing: border-box; } - 尤其当配合
max-width和百分比宽度时，content-box会让实际占用宽度超出预期 - 这个设置不影响 grid 轨道计算，但直接影响内容渲染空间，不设就容易出现横向滚动条或列错位
真正卡住人的往往不是语法，而是自定义元素默认的盒模型和 display 行为——它不像 <div> 那样“习惯性可用”，每一步都要显式补全。
