text-indent 在 grid 容器中失效，因 grid 创建新格式化上下文，使 p 变为网格项而失去首行语义；可改用 padding-left + text-align: justify 模拟，或外层包裹 div 保持块级上下文。
text-indent 在 Grid 容器里为什么失效
不是代码写错了，是 Grid 创建了新的格式化上下文，p 的块级盒行为被覆盖——text-indent 仍计算，但浏览器不按“段落首行”逻辑渲染。常见现象：加了 text-indent: 2em，第一行纹丝不动，或缩进方向错乱。
根本原因在于：display: grid（或 display: inline-grid）让子元素（比如 p）变成网格项（grid item），它默认以 align-self: stretch 填满行轴，同时失去传统块级流中对“首行”的语义感知。
- 临时验证：给
p加display: block（显式重置）+margin: 0，再看text-indent是否恢复 - 更稳妥做法：把
p包一层<div>，让该 <code>div做 grid item，p保持纯块级上下文 - 若必须让
p直接当 grid item，改用padding-left: 2em+text-align: justify模拟效果（注意这不是语义首行缩进，仅视觉近似） - 推荐组合：
grid-template-columns: minmax(0, 1fr) minmax(30ch, 2fr)，为第二列设下限，确保缩进后文字有足够空间 - 避免用
%或rem做缩进值：前者随容器宽变化，后者受根字体 JS 调整影响，都会破坏与网格线的对齐节奏 - 调试技巧：在开发者工具里打开网格叠加层（Elements → Styles → :hover grid → 勾选 “Show grid areas”），观察缩进后首字是否落在第二列起始线右侧
- 解法一：把
justify-content移到子元素内部，即p { text-align: center; text-indent: 2em; }（注意text-align对text-indent无冲突） - 解法二：改用
margin-left替代，但仅限单行标题类场景；多行段落务必回归text-indent+ 外层包裹 div - 别碰
flex-shrink: 0：它会让p拒绝压缩，反而放大缩进溢出风险 - 示例：
.grid-para::before { content: ""; display: inline-block; width: 2em; }—— 这个2em必须和你网格定义中的2em轨道完全一致 - 更稳方案：放弃伪元素，在网格模板中预留一列（如
grid-template-columns: 2em 1fr），把缩进内容放进第二列，p放进grid-column: 2 - 注意：伪元素加
white-space: pre会导致换行异常，尤其在响应式断点切换时
想缩进又对齐 CSS Grid 列线，该用什么值
用 2em 依然最可靠，但需配合网格轨道定义——否则缩进可能“撞上”列间隙（gap）或越界。
关键约束：缩进量不能大于网格列的最小可用宽度。例如你设了 grid-template-columns: 1fr 2fr，而内容区总宽仅 320px，那 2em（≈32px）就占了十分之一，容易挤占正文可读空间。
Flex 容器里也能用 text-indent 吗
能，但比 Grid 更隐蔽地失效。Flex 项默认是 align-self: stretch 且主轴方向拉伸，text-indent 不会报错，但常被 justify-content 或 flex-wrap 干扰。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
典型陷阱：父容器设了 display: flex; justify-content: center，你给 p 加 text-indent: 2em，结果文字先缩进再居中——视觉上等于没缩进。
伪元素模拟缩进时怎么卡准网格线
用 ::before 插入空格或符号再设宽，本质是脱离文本流的定位，和网格线对齐靠的是显式尺寸控制，不是自动吸附。
真正能卡准的做法是：把伪元素宽度设为与网格列轨道一致的单位（如 minmax() 中的固定部分），并用 grid-column-start 锚定位置。
真正难的不是加缩进，是让缩进在网格布局里不漂移、不遮挡、不破坏流式阅读节奏。多数人卡在没意识到 text-indent 是个“块级流原住民”，一旦被 Flex/Grid 收编，就得给它单独划块自治区域。
