在使用 CSS Grid 布局时，经常会遇到子项大小不一致的问题。在这篇文章中，我们将深入探讨这个问题，并分享解决方案，帮助你更好地使用 CSS Grid 布局来创建网页。
问题描述
在 CSS Grid 布局中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来指定网格的行和列。我们可以使用命名网格线或网格线编号来定义每个子项的位置。
例如，我们可以创建一个 2 x 2 的网格，其中每个子项的高度和宽度都是 100 像素：
-- -------------------- ---- ------- ------- - -------- ----- ------------------- ----- ------ ---------------------- ----- ------ - ------ - -- ------- -- -展开代码
但是，如果我们的子项大小不一致，会发生什么呢？例如，如果我们将第一个子项的高度改为 50 像素：
.child:first-child { height: 50px; }
我们会发现，在网格中留下了一个空白的区域，而第一个子项被截断了。这是因为 CSS Grid 布局默认采用自动缩放的方式，使网格中的所有子项都具有相同的大小。
解决方案
要解决这个问题，我们可以使用 grid-auto-rows 和 grid-auto-columns 属性。这些属性控制网格中未显式命名的网格行和列的大小。
例如，我们仍然可以创建一个 2 x 2 的网格，但我们不再指定子项的大小：
-- -------------------- ---- ------- ------- - -------- ----- ------------------- ----- ------ ---------------------- ----- ------ --------------- --------- ----- ------------------ --------- ----- - ------ - -- ------- -- -展开代码
在这个示例中，我们使用 minmax(0, 1fr) 函数指定网格行和列的大小。这个函数限制了网格行和列的最小大小为 0，最大大小为 1 个网格单位。这意味着如果没有其他显式规则来控制网格行和列的大小，它们将平均分配剩余空间。
现在，即使第一个子项的大小改变，我们的网格仍然能够正确地布局：
.child:first-child { height: 50px; }
深入探讨
grid-auto-rows 和 grid-auto-columns 属性是非常有用的 CSS Grid 布局技巧。它们可以帮助我们创建自适应的网格，适应不同的子项大小和数量。但是，要正确使用这些属性，有些细节需要注意。
首先，我们应该始终使用正确的单位来设置网格行和列的大小。在上面的示例中，我们使用像素作为单位来定义 grid-template-rows 和 grid-template-columns 属性。但是，由于网格的大小是相对于其父元素的，因此使用百分比更具灵活性。如果我们更改父元素的大小，百分比单位会自动调整网格的大小，从而使网格子项布局更加稳定。
其次，我们还需要考虑其他的 CSS 样式对网格布局的影响。例如，如果我们将子项的 box-sizing 属性设置为 border-box，我们可能需要调整网格行和列的大小，以考虑子项的内部填充和边框。
最后，我们还可以使用其他属性，例如 grid-gap 和 justify-items，来进一步调整网格布局。
示例代码
以下是完整的示例代码，演示了如何使用 grid-auto-rows 和 grid-auto-columns 属性来解决在 CSS Grid 布局中遇到的子项大小不一致问题。
-- -------------------- ---- ------- ---- --------------- ---- ------------ -------------- ------- ---- ------------ -------------- ------- ---- ------------ -------------- ------- ------ ------- ------- - -------- ----- ------------------- ----- ------ ---------------------- ----- ------ --------------- --------- ----- ------------------ --------- ----- --------- ----- - ------ - ----------- ----- -------- ----- ----------- ----------- - -------- - --------- - - -- ------- ----- - -------- - ------------ - - -- - -------- - ------------- ------- - --------展开代码
在这个示例中，我们创建了一个 2 x 2 的网格，有三个子项。我们使用 minmax(0, 1fr) 函数来设置网格的自动行和列，并使用 grid-gap 属性添加了 10 像素的间距。
.child-1 子项的高度被设置为 50 像素，.child-2 跨越两列。我们还使用 justify-self 属性将 .child-3 子项居中对齐。
通过使用 grid-auto-rows 和 grid-auto-columns 属性，我们可以轻松地创建具有不同子项大小的网格布局，而无需手动调整每个子项的位置和大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c50a286e1fc40e36e3f8f9
