动态改Grid列数应使用CSS变量+useState+useEffect联动，--cols设无单位数字并带默认值，配合grid-auto-rows: minmax(60px, auto)防塌陷，auto-fit优于auto-fill，禁用max-content和百分比gap。
直接改CSS变量比操作style更可靠
React里想动态改Grid列数，别碰element.style.gridTemplateColumns——它没法响应式，也不支持repeat(var(--cols), ...)这类计算。正确做法是用CSS自定义变量 + useState + useEffect联动。
关键点：--cols必须是无单位数字（比如3，不是"3"），且要设默认值，否则浏览器会跳过整条grid-template-columns声明。
- 在
:root或组件级style里定义：--cols: 3; - JS中用
document.documentElement.style.setProperty('--cols', String(newCount)) - CSS里写：
grid-template-columns: repeat(var(--cols), minmax(200px, 1fr)); - IE11不支持CSS变量，需降级：预设
.grid-cols-1/.grid-cols-2类名，用className切换
行高塌陷？八成是没管grid-auto-rows
写了grid-template-rows: auto但新卡片一加进来就高度归零？那是因为grid-template-rows只管你手写的那几行，动态插入的项掉进“隐式行”，由grid-auto-rows控制。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 别用
grid-auto-rows: auto——内容少时塌成一条线，文字根本看不清 - 推荐写法：
grid-auto-rows: minmax(60px, auto)（保底可读高度 + 内容撑开） - 固定高度容器中均分空间才用
grid-auto-rows: 1fr，否则空行会占满整个视口 - 子元素写
height: 100%基本无效——Grid默认align-items: stretch，删掉它反而更稳
auto-fit和auto-fill选错会导致布局“假死”
两者都得配minmax()才能生效，但行为相反，选错会让人以为Grid“卡住”了。
立即学习“前端免费学习笔记（深入）”；
-
auto-fill：按最小宽度尽可能铺满整行，哪怕后面几列没内容也留白（DOM存在、视觉为空） -
auto-fit：先尝试铺满，再把空轨道收掉，把空间重新分给有内容的列 - 响应式卡片列表一律用
auto-fit，auto-fill适合需要预留位置的仪表盘场景 - 错误写法：
repeat(auto-fit, 1fr)——缺minmax()，浏览器无法判断最小宽度，直接退化为单列
React中频繁增删子项时，避免重排抖动
每次setState新增一个网格项，如果没设grid-auto-rows或用了max-content，浏览器会反复重排，页面肉眼可见地“跳”。
- 禁用
grid-auto-rows: max-content——内容越多重排越狠，尤其在长列表中 - 改用
grid-auto-rows: minmax(60px, fit-content(400px))，设个上限防失控 - gap别用百分比，用
rem或px，否则字体缩放时gap跟着变，破坏网格节奏 - 如果容器高度固定（比如
height: 600px），grid-auto-rows: 1fr才安全；否则优先用minmax()
grid-auto-rows和grid-auto-flow必须同时检查**。前者管新增项的行高，后者决定新增项往哪塞——grid-auto-flow: column时，列数变多可能让内容横向溢出，而你只盯着grid-template-columns改。 
