CSS Grid 是一种先进的网格布局系统，它可以帮助我们轻松地创建各种复杂的布局。但是在使用 CSS Grid 时，我们可能会面临一个常见问题，那就是自适应元素高度不同的情况。在本文中，我们将深入探讨这个问题，并提供一些有效的解决方案。
问题描述
在使用 CSS Grid 布局时，我们可以很容易地指定每个网格单元格的大小，使其与其他单元格相等或不相等。但是，在某些情况下，我们希望元素的高度可以根据其内容自适应而不是固定值。例如，我们可能有一个包含不同长度段落的网格项，并希望网格项的高度根据段落的长度而变化。
示例代码
<div class="grid-container"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ----- - ----------------- -------- -------- ----- -展开代码
在上面的示例代码中，我们创建了一个包含三个段落的网格容器，并使用 grid-template-columns 属性指定每个网格单元格的最小宽度为 250px。我们还使用 grid-gap 属性为网格单元格之间提供 20px 的间距。由于我们没有为网格项指定任何高度属性，这些网格项将具有默认的自适应高度。
解决方案
使用 auto-fill 和 minmax
一种简单的解决方案是使用 auto-fill 和 minmax 属性。这些属性允许我们动态地调整网格单元格的大小，并根据其内容自适应其高度。
我们可以使用 auto-fill 属性指定网格单元格的数量，并使用 minmax 属性指定网格单元格的最小和最大大小。这将告诉浏览器，如果有足够的空间，它应该尽可能使用更多的列来容纳更多的单元格。如果没有足够的空间，它应该缩小单元格，以便它们适合行。
示例代码
<div class="grid-container"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------------- ------------- ------ --------- ----- - ----- - ----------------- -------- -------- ----- -展开代码
在上面的示例代码中，我们使用 auto-fill 属性指定自动根据可用空间添加列，并使用 minmax 属性指定网格单元格的最小宽度为 250px，最大宽度为 1fr。我们还使用 grid-auto-rows 属性指定每个网格单元格的最小和最大高度分别为 100px 和 auto。这意味着当网格项的高度小于 100px 时，它将自动调整为 100px。当高度大于 100px 时，它将根据内容自适应高度。我们还为网格项添加了 grid-gap 属性，以在单元格之间添加间距。
使用 JavaScript 动态调整高度
另一个解决自适应元素高度不同的问题的方法是使用 JavaScript 动态调整高度。这种方法需要一些额外的代码和计算，但它允许我们更好地控制网格项的高度和布局。
我们可以使用 JavaScript 监听网格项的加载和大小更改事件，并使用 DOM 操作来调整网格项的高度。为了使这种解决方案更具动态性，我们可能还需要使用 requestAnimationFrame 来避免在浏览器重绘期间的性能问题。
示例代码
<div class="grid-container"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ----- - ----------------- -------- -------- ----- -展开代码
-- -------------------- ---- ------- -- --------- ------------------------------------------------------------- -- - ----------------------------- ------------------ --------------------------------- ------------------ --- -- ---- - --------- -------- ------------------ - ------------------------------- -- - ------------------------------------------------------------- -- - ----------------- - ------- ----- ---------- - ------------------ ----------------- - ---------- - ----- --- --- -展开代码
在上面的示例代码中，我们使用 JavaScript 监听网格项的加载和大小更改事件，并调用 adjustItemHeight 函数来动态调整网格项的高度。在函数内部，我们先将网格项的高度重置为自动，然后获取其实际的高度，并将其设置为其实际高度。我们还在函数内部使用 requestAnimationFrame 来避免在浏览器重绘期间的性能问题。最后，我们使用 Array.from(document.querySelectorAll(".item")) 来选择所有网格项，并为每个网格项添加事件监听器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bea97f0c976d473a2c3466
