前言
在网页设计中，布局是一个非常关键的环节。为了实现灵活、多样化的布局，我们需要使用众多的方法和技术。CSS Grid 布局作为一种相对新的布局技术，已经成为前端开发人员的常用工具之一。然而，这种被广泛认为是“神器”的 CSS Grid 布局，却也有一些倒霉的 BUG ，这就需要我们进行深入了解，以及提供解决方案。
CSS Grid 布局简介
CSS Grid 布局是 CSS3 中新增加的一种布局方式，是一种二维排版系统，可在行和列的方向上同时布局。在 CSS Grid 布局中，是将整个页面划分为一些列和行进行布局，方便我们对页面进行更加细致的控制。CSS Grid 也让我们能够轻松实现各种独特的布局，而不必使用其他较为复杂的技术。
CSS Grid 布局大概有下面几个组成部分：
- 网格容器 (grid container)：它是由 display 属性设置为 grid 或 inline-grid 的父元素。
- 网格项 (grid item)：它是网格容器中的子元素。
- 网格线 (grid line)：它是网格容器中定义好的、用于划分整个网格的线条。
- 网格轨道 (grid track)：指两个相邻网格线之间的空间。
我们可以通过下面这个示例了解一下 CSS Grid 布局的基本结构：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ - ----- - ----------------- ----- ------- --- ----- ----- -
在上述示例代码中，我们首先定义了一个网格容器 .container ，并通过 grid-template-columns 和 grid-template-rows 分别定义了它的列数和行数。同时，我们还可以在 CSS Grid 中进行更加高级的操作，需要的话可以查阅相关文档。
CSS Grid 布局的 BUG
虽然 CSS Grid 布局拥有许多优点，在网页设计过程中能大大提高开发效率，但我们也需要认真对待其中存在的 BUG ,以免在布局的过程中浪费时间与精力。
最近，我遇到了一个关于 CSS Grid 布局的 BUG 。我想在一个网格容器中使用 auto-fit 关键字，但是发现在 Chrome 和 Firefox 中，这个关键字不能正常工作。这个 BUG 的根本原因在于 auto-fit 无法正确计算网格容器宽度。
下面这个示例中，就展现了该 BUG 的问题所在：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}在上述代码中，我们定义了一个网格容器 .container ，使用 repeat 函数，设置了自动重复填充网格，并计算出网格元素的最小和最大值。然而，在 Chrome 和 Firefox 中，auto-fit 无法根据网格容器的实际宽度进行正确计算，导致网格无法填满整行。
解决方案
既然我们已经知道了 auto-fit 关键字的 BUG ，那么我们要对其进行修改，以达到期望效果。在这里，我们可以使用一个叫做 minmax() 的新属性，在设置网格最小宽度与最大宽度时，同时也可以解决掉这个 BUG 。
下面这个示例代码，将使用 minmax() 属性来重新设置自动重复填充网格：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
}在上述代码中，我们把 auto-fit 替换为了 auto-fill，并使用 minmax 函数指定了网格元素的最小值和最大值。这样，在 Chrome 和 Firefox 中就能够正常地生成自适应的网格布局。
总结
CSS Grid 布局是前端开发中的一个重要组成部分，能够为网页设计带来新的可能性。然而，在实际开发中，我们也要谨慎对待其中存在的各种 BUG ，以保证设计效果的最优化。我们可以在进行网格自适应布局时，对 auto-fit 和 auto-fill 进行深入了解，以达到更加优秀的网页设计效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ccf2601519ea946c0c0b9e