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="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" 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，拉高了所有项。
