在使用 CSS Grid 布局时，很多人都喜欢使用 grid-template-columns:auto 来让列自动适应宽度。然而，这种写法在 Chrome 浏览器中并不被支持，会导致布局错乱。
问题分析
为什么 Chrome 不支持 grid-template-columns:auto 呢？原因是当存在多个网格项时，自动计算列宽会出现不一致的情况。例如下面的示例：
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- --------- ----- - ---------- - ----------------- -------- -------- ----- -
在 Chrome 中呈现的网格布局如下图所示：
可以看到，因为文字长度不同，各个网格项的宽度不一致。由于 grid-template-columns:auto 无法自动计算各个列的宽度，就会导致布局错乱。
解决方案
既然 grid-template-columns:auto 无法完成自动计算，我们需要手动给出每一列的宽度。这可以通过使用 repeat(auto-fit, minmax(200px, 1fr)) 来实现。
repeat(auto-fit, minmax(200px, 1fr)) 的含义是：
auto-fit表示根据容器宽度自动计算列数；minmax(200px, 1fr)指定最小和最大列宽，即当容器宽度超过 200px 时每列自动铺满，但最大不超过 1fr。
改写上面的示例代码为：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ---------- - ----------------- -------- -------- ----- -
在 Chrome 中呈现的网格布局如下图所示：
可以看到，各个网格项的宽度已经自动适应了容器宽度，并保持一致。
总结
在 CSS Grid 布局中，grid-template-columns:auto 不被 Chrome 浏览器所支持，可能会导致布局错乱。我们可以使用 repeat(auto-fit, minmax(200px, 1fr)) 来手动指定每一列的宽度，以解决这一问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646220a5968c7c53b0371781