CSS Grid 中文字换行不规则主因是文本容器默认样式或对齐方式不当，需先设 overflow-wrap: break-word、white-space: normal 控制换行，再用 align-items/justify-items 统一对齐，并统一 padding、min-height 及块级包裹 inline 元素。
文字在 CSS Grid 里换行不规则，通常不是 Grid 本身的问题，而是文本容器的默认行为（如 white-space: nowrap）或单元格对齐方式导致的视觉错位。关键要分两步处理：控制文字换行（word-wrap / overflow-wrap 和 word-break），再调整单元格内内容的垂直/水平对齐（align-self、justify-self 或网格容器级的 align-items / justify-items）。
确保文字能正常换行
Grid 容器不会阻止换行，但子元素（比如 <div> 或 <p>）可能继承了不换行的样式（例如来自重置 CSS 或框架）。需显式设置：
-
overflow-wrap: break-word;（推荐）—— 在长单词或 URL 处主动断行，保持语义完整性 -
word-break: break-word;（旧写法，部分浏览器兼容性更好，但语义略弱） -
white-space: normal;—— 确保不意外设成nowrap或pre
示例：
.grid-item {
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
}
统一单元格内文字对齐方式
即使文字能换行，若每个 grid item 的 align-self 不一致（比如有的是 start，有的是 center），会导致文字基线、高度看起来“不规则”。建议：
立即学习“前端免费学习笔记（深入）”；
- 在网格容器上统一设置：
align-items: start;（垂直顶端对齐）或align-items: stretch;（默认，拉满高度后文字居中易显不齐） - 如需单个项特殊处理，再用
align-self: center;或align-self: end;覆盖 - 水平对齐可用
justify-items: start;或子项上justify-self: center;
检查高度与 padding 是否一致
换行后“不规则”常源于视觉错觉：有些项内容少、高度小，有些换行后变高，加上 padding/margin 不统一，显得参差。可：
- 给所有 grid item 设置固定
min-height或height（慎用 full height） - 统一
padding和box-sizing: border-box; - 避免子元素（如
<p>）自带 margin 影响布局，可重置：p { margin: 0; }
避免 inline 元素干扰换行
如果 grid item 内部是 <span>、<a> 等 inline 元素，它们默认不换行且无视 overflow-wrap。解决方法：
- 给 inline 元素加
display: inline-block;或display: block; - 或直接用块级标签（如
<p>、<div>）包裹文本
