如何在 CSS Grid 中更改网格大小
CSS Grid 是一种灵活且强大的布局方式，它允许我们创建网格布局，并进行自适应布局。在过去，为了实现这种类似表格的布局，我们通常使用 HTML 表格或者使用 Float 或 Position 定位来布局。但 CSS Grid 确实更强大，因为我们可以轻松地指定网格的大小以及更改其大小。
在 CSS Grid 中设置网格大小
我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的大小与位置。下面是一个使用这两个属性创建网格的示例。
<div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> </div>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px);
}在上面的示例中，我们通过 grid-template-columns 和 grid-template-rows 属性定义了一个 2 x 2 的网格，其中每个网格单元都有一个 100 像素的高度和 1fr 的宽度。
更改网格大小
如果需要更改网格的大小，我们可以通过简单地更改 grid-template-columns 或 grid-template-rows 的值来实现。我们可以使用长度或百分比值，也可以使用 fr 值。
下面是一个更改网格大小的示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 100px 200px 1fr;
}在上面的示例中，我们将第二列的宽度从 1fr 更改为 200px，并将第二行的高度从 100 像素和 200 像素更改为 1fr。
使用 minmax 和 auto-fill
minmax 函数与 auto-fill 可以帮助我们在网格布局中更灵活地设置网格大小。minmax 函数允许我们指定网格在给定范围内的最小和最大值，auto-fill 则允许我们自动填充网格容器。
下面是一个使用 minmax 和 auto-fill 的示例：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
}在上面的示例中，我们使用了 repeat 函数并结合了 minmax 和 auto-fill。这使得我们可以创建一个自适应的网格布局，每个网格单元的最小宽度为 100px，最大宽度为 1fr。每个网格单元的最小高度为 150px，最大高度为 1fr。
总结
CSS Grid 是一种功能强大的布局方式，它允许我们创建和更改网格大小，自定义每个网格单元的大小和位置。我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的大小和位置，并且可以使用 minmax 和 auto-fill 来更灵活地设置网格大小。
在使用 CSS Grid 时，最重要的是要清楚地了解如何更改网格大小以及如何使用 minmax 和 auto-fill 函数。通过这些，我们可以设计出更加自适应和灵活的布局，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d02537d4982a6eb65cc70