grid-template-columns: 1fr 表示容器仅有一列且占据全部剩余空间，是弹性单位而非固定尺寸；需配合多列定义（如repeat(2,1fr)）或响应式函数（如auto-fit）实现子项自适应布局。
grid-template-columns: 1fr 是什么行为
grid-template-columns: 1fr 表示整行只有一列，且该列占据容器剩余的全部可用空间。它本身不“自适应多个元素”，而是把整个网格容器按比例切分——1fr 是一个**弹性单位**，代表“剩余自由空间的等份”，不是固定像素或百分比。
常见误解是以为写上 1fr 就能让每个子项自动变宽填满，其实真正起作用的是列定义数量和子项的放置逻辑。
想让每个网格项宽度自适应（比如平分容器）
关键不在单个 1fr，而在用多个 1fr 或结合 repeat() 来声明多列：
- 两列等宽：
grid-template-columns: 1fr 1fr或简写为grid-template-columns: repeat(2, 1fr) - 三列等宽：
grid-template-columns: repeat(3, 1fr) - 混合布局（如侧边栏固定 + 主内容自适应）：
grid-template-columns: 200px 1fr
此时每个网格项（<div class="item">）默认按源顺序依次填入各列，宽度就随列宽自动伸缩。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<h3>为什么设置了 1fr 还没效果？检查这些点</h3>
<p>常见失效原因不是语法错，而是上下文约束没满足：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2067" title="Pixelfox AI"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680175146446.png" alt="Pixelfox AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2067" title="Pixelfox AI">Pixelfox AI</a>
<p>多功能AI图像编辑工具</p>
</div>
<a href="/ai/2067" title="Pixelfox AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>父容器没设 <code>display: grid —— grid-template-columns 只在 grid 容器上生效
grid-column 或 grid-area，跳过了自动列分配auto 且无块级约束（比如在 inline 元素里），导致可用宽度为 0grid-template-columns: 1fr 却放了多个子项 —— 它们会全部挤在第一列里垂直堆叠，看起来像没自适应需要响应式自适应？别只靠 1fr
1fr 本身不响应，但可以配合媒体查询或 minmax() + auto-fit 实现流式列数：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
这行代码的意思是：每列最小 250px，最大尽可能均分剩余空间；浏览器会根据容器宽度，自动算出最多能放几列，不足时也不留空列。
注意：auto-fit 和 auto-fill 行为不同——auto-fit 会合并空列，auto-fill 保留空轨道，实际布局差异明显。
复杂点在于：当子项内容高度差异大，又没设 align-items 或 justify-items，视觉上容易误判“没自适应”，其实只是对齐方式默认是 stretch，拉高了所有项。
