纯CSS幻灯片需用grid-template-areas显式定义每张幻灯片区域名（如"slide1" "slide2"），配合opacity、z-index和:checked~选择器控制显示/隐藏与层级，禁用grid-auto-flow，响应式通过媒体查询重置区域布局，兼顾可访问性需少量JS补充。
用 grid-template-areas 定义幻灯片层级顺序
纯 CSS 幻灯片的核心不是“移动”，而是“切换可见性”——靠网格区域命名 + opacity + z-index 控制哪张图在最上层。必须显式定义每个 .slide 的位置，否则浏览器无法确定叠放次序。
常见错误是只写 display: grid 却没设 grid-template-areas，导致所有幻灯片默认堆在同一个网格单元里，opacity: 0 后看不见，但点击/焦点仍可能触发（尤其影响可访问性）。
-
grid-template-areas值需按行书写，每张幻灯片占一个独立区域名，例如："slide1" "slide2" "slide3" - 每个
.slide必须配grid-area: slide1;等对应名称 - 容器需设
position: relative，否则z-index不生效
用 :checked + ~ 选择器驱动状态切换
无 JS 幻灯片依赖原生表单控件（如 input[type="radio"]）作为状态源。关键在于：只有被选中的 input 能通过相邻/后续兄弟选择器影响对应幻灯片的样式。
容易踩的坑是把 input 放在 .slide 后面——这样 input:checked ~ .slide 就匹配不到；或者忘了隐藏 input 本身（用 position: absolute; left: -9999px 最稳妥）。
立即学习“Java免费学习笔记（深入）”；
- 所有
input必须同名（name="carousel"），才能互斥选中 - 导航点（
label）需用for关联对应input的id - 切换动画靠
transition: opacity 0.4s ease，但必须加在.slide上，不能只加在input:checked ~ .slide规则里
避免 grid-auto-flow 干扰静态布局
如果容器用了 grid-auto-flow: column 或 row，浏览器会自动分配轨道，覆盖你手动写的 grid-area 定位——幻灯片就乱套了。这种布局下，grid-auto-flow 必须禁用或设为 dense（但 dense 可能打乱预期顺序）。
性能上，grid-auto-flow 触发隐式网格生成，对纯幻灯片这种固定数量、固定位置的场景是冗余开销。
- 显式声明
grid-template-areas时，grid-auto-flow应设为none - 若要支持无限轮播（伪），得靠重复定义区域名（如
"slide1 slide2 slide3 slide1"），但 CSS 本身不支持动态区域，所以实际只能做有限张数 - 不要混用
grid-column/grid-row和grid-area，后者优先级更高，前者可能被忽略
响应式下 minmax() 与幻灯片尺寸冲突
当用 repeat(auto-fit, minmax(300px, 1fr)) 做响应式网格时，它和单张幻灯片全宽布局天然矛盾——前者需要多列并排，后者要求每张占满整行。强行套用会导致幻灯片被压缩或错位。
真正适配小屏的做法，是用媒体查询重置 grid-template-areas，而不是改列数。比如桌面端三张并排用 "slide1 slide2 slide3"，移动端切回单列 "slide1" "slide2" "slide3"。
-
minmax()适合卡片列表，不适合线性幻灯片；混淆这两类场景是多数失败案例的根源 - 缩略图导航栏若也用 Grid 布局，它的
grid-template-columns应独立设置，别和主幻灯片共用同一套规则 - 移动端需额外加
touch-action: manipulation防止滑动延迟，但纯 CSS 方案无法拦截手势，这点必须接受限制
最常被忽略的是可访问性：没有 JS 就没法用键盘 Tab 切换到未聚焦的 input，所以必须确保每个 label 可聚焦、有明确文字（哪怕 aria-label），且当前幻灯片要有 aria-live="polite" 区域播报变化——这部分 CSS 做不了，终究要补一点 JS 才算完整。
