CSS Grid 是一种强大的布局方式，它可以让我们轻松地创建复杂的网格布局。但是当元素数量不固定时，如何使用 CSS Grid 进行布局呢？在本文中，我们将探讨一些应对元素数量不固定情况的技巧和策略。
1. 使用 repeat() 函数
repeat() 函数可以帮助我们快速创建重复的网格单元格。例如，如果我们想要创建一个有 4 个列的网格，可以这样写：
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}这将创建一个具有 4 个等宽列的网格。如果我们想要创建一个具有不同宽度的网格，可以使用 repeat() 函数的另一个形式：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}这将创建一个具有自适应列宽的网格，每个列的最小宽度为 200 像素，最大宽度为 1fr。这个网格可以自动适应容器的宽度，当容器变窄时，它会自动缩小列宽，直到达到最小宽度为止。
2. 使用 minmax() 函数
minmax() 函数可以帮助我们限制网格单元格的最小和最大尺寸。例如，如果我们想要创建一个具有 3 个列的网格，并且每个列的最小宽度为 200 像素，但是最大宽度应该根据容器的宽度自动调整，可以这样写：
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}这将创建一个具有 3 个列的网格，每个列的最小宽度为 200 像素，但是最大宽度为 1fr。这个网格可以自动适应容器的宽度，当容器变窄时，它会自动缩小列宽，直到达到最小宽度为止。
3. 使用 grid-auto-columns 属性
grid-auto-columns 属性可以帮助我们指定网格中未显式指定列宽的网格单元格的宽度。例如，如果我们想要创建一个具有 4 个列的网格，但是只有前 3 个列具有显式指定的宽度，可以这样写：
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-auto-columns: 1fr;
}这将创建一个具有 4 个列的网格，前 3 个列的宽度为 200 像素，而第 4 个列的宽度为 1fr，它会自动适应容器的宽度。
4. 使用 grid-auto-rows 属性
grid-auto-rows 属性可以帮助我们指定网格中未显式指定行高的网格单元格的高度。例如，如果我们想要创建一个具有 4 个行的网格，但是只有前 3 个行具有显式指定的高度，可以这样写：
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 1fr;
}这将创建一个具有 4 个行的网格，前 3 个行的高度为 100 像素，而第 4 个行的高度为 1fr，它会自动适应容器的高度。
5. 使用 grid-auto-flow 属性
grid-auto-flow 属性可以帮助我们指定网格中未显式指定位置的网格单元格的排列方式。例如，如果我们想要创建一个具有自动排列的网格，可以这样写：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}这将创建一个具有 3 个等宽列的网格，但是它会自动排列网格单元格，以填充空白区域。使用 dense 值可以让网格单元格更加紧密地排列。
示例代码
下面是一个示例代码，演示了如何使用上述技巧应对元素数量不固定的情况：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- ---------------- ------------- ------ --------------- ------ --------- ----- - ----- - ----------------- ----- -------- ----- -
-- -------------------- ---- ------- ---- ------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- --------------------- ---- --------------------- ---- --------------------- ------
在这个示例代码中，我们创建了一个具有自适应列宽和固定行高的网格，每个网格单元格的最小宽度为 200 像素，最大宽度为 1fr。我们还使用了 grid-gap 属性来添加网格单元格之间的间距，让布局更加美观。这个网格可以自动适应容器的宽度，并且可以自动添加或删除网格单元格，以适应元素数量的变化。
结论
在本文中，我们探讨了如何使用 CSS Grid 应对元素数量不固定的情况。我们介绍了 repeat() 函数、minmax() 函数、grid-auto-columns 属性、grid-auto-rows 属性和 grid-auto-flow 属性等技巧和策略，希望能够帮助你更好地应对这种情况。使用这些技巧，我们可以轻松地创建具有自适应布局和美观效果的网格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6756cd39ba81afebc521cabc