门神应贴在最外侧门上，等宽双开门每侧各贴一张；单侧开门则只贴一侧，左右及中间需留空。
用 grid-template-columns 直接定义双列等宽轨道
左右对开的门神布局，本质就是让容器内两个子元素各占 50% 宽度、并排铺满整行。最直接的方式是设置两列等宽的网格轨道：grid-template-columns: 1fr 1fr 或 grid-template-columns: 50% 50%。前者更推荐——1fr 1fr 在响应式场景下更稳定，不会因边框/内边距导致溢出；50% 在父容器有 padding 或子元素有 box-sizing: content-box 时容易错位。
注意：必须给容器声明 display: grid，否则轨道定义无效。
两个子元素如何自动填入左右轨道
Grid 默认按源顺序逐个填入单元格，所以只要容器里只有两个直系子元素，它们就会自然落入第一行的左、右轨道中。无需额外指定 grid-column，除非你想打破顺序或跨列。
常见错误现象：第二个子元素换行了——大概率是容器设置了 grid-auto-flow: row dense 或存在隐藏文本节点（如换行空格），建议用 display: contents 包裹或确保 DOM 干净；也可能是子元素设置了 width: 100% 且盒模型为 content-box，导致实际宽度超 50%。
- 确保两个子元素没有设置
float、position: absolute等脱离文档流的样式 - 检查是否意外触发了
grid-auto-rows或隐式网格线生成 - 用浏览器开发者工具的“Layout”面板确认每个子元素的
grid-column-start和grid-column-end
适配移动端时要不要改轨道定义
门神布局在小屏上通常需要堆叠显示，此时应通过媒体查询切换轨道：@media (max-width: 768px) { grid-template-columns: 1fr; }。别用 minmax(50%, 1fr) 之类试图“兼顾”的写法——它无法真正实现单列，反而可能因最小尺寸约束导致布局异常。
性能影响很小，但要注意：频繁切换 grid-template-columns 可能触发重排，如果伴随动画，建议只对 transform 或 opacity 做过渡。
为什么不用 flex 而用 grid
单纯左右平分，flex 确实更轻量。但用 grid 的关键价值在于后续扩展性：比如将来要在顶部加横幅、底部加标语、中间再塞一个居中按钮，只需调整 grid-template-areas 或新增轨道，无需重构结构。而 flex 在二维布局上天然吃力。
容易被忽略的一点：grid 的轨道单位（fr）是基于可用空间计算的，如果容器本身 width 未明确（比如 display: inline-grid），可能导致左右不对齐——务必确认容器是块级且宽度可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
