不能直接用伪元素实现正方形网格，因为伪元素默认行内级、无尺寸、不参与文档流，无法构成网格结构；它只能作为装饰层覆盖在grid/flex容器上，需配合aspect-ratio或padding-top等方案辅助实现视觉正方形效果。
不能直接用伪元素“实现正方形网格”，伪元素本身不构成网格结构，它只能作为装饰层覆盖在已有的 Grid 或 Flex 容器上。真正的正方形网格必须由容器和子项共同构成，伪元素只是辅助定位、填充或修饰——比如撑出高度、画格线、加角标。
为什么不能只靠 ::before 做正方形网格
伪元素默认是行内级、无尺寸、不参与文档流的。即使你写 .grid::before { content: ""; padding-top: 100%; }，它也不会让父容器变成正方形，更不会影响其他子项布局。它只是在父容器里“占个高”，且这个高度还依赖于父容器宽度（而父容器本身可能没设宽）。
- 伪元素不是网格子项，
grid-row/grid-column必须显式声明才能定位到某个格子上 -
padding-top: 100%只对position: relative的父容器生效，且父容器不能有height或min-height干扰 - 若想每个格子都是正方形，得给每个
grid-item单独设比例，而不是只靠一个伪元素
真正可行的组合方案：aspect-ratio + 伪元素装饰
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）应优先用 aspect-ratio: 1 / 1 控制每个格子，再用伪元素做视觉增强——比如加边框、阴影、角标或背景纹理。
- 给每个
grid-item设aspect-ratio: 1 / 1，并确保没写height、min-height或align-self: stretch（会覆盖比例） - 若需统一外边框或分隔线，用
.grid::before或.grid::after配合repeating-linear-gradient绘制，比每个格子加border更轻量 - 想在特定格子右下角加“NEW”标签？写
.grid-item:nth-child(3)::after，设grid-row/grid-column落在对应轨道，并用place-self: end end定位
兼容旧浏览器的降级写法：伪元素撑高 + position: absolute
当目标环境不支持 aspect-ratio（如 Safari
- 每个
grid-item设position: relative，内部嵌套div.content用于放内容 -
grid-item::before写content: ""; display: block; padding-top: 100%; -
.content设position: absolute; inset: 0;填满伪元素撑出的空间 - 务必移除所有
height、min-height，否则 padding 占位失效
最容易被忽略的一点：伪元素是否渲染，取决于它有没有 content 和合适的 display。哪怕只是 content: ""，漏了就等于没写；而 display: contents 在 Firefox 115 之前完全不支持伪元素，用它做定位大概率白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
