CSS Grid 是一个非常强大的 CSS 布局模块。最近，网站和应用程序越来越普遍地采用了这种布局模块。CSS Grid 可以轻松地创建非常复杂的布局，包括多个列和行，并可以控制每个单元格的大小和位置。但是，一些人可能被一个问题困扰：如何在 CSS Grid 中设置可滚动的内容区域？
本文将向你展示如何在 CSS Grid 中设置可滚动的内容区域，并向你介绍一些特定的技巧和最佳实践。
设置可滚动的内容区域
要在 CSS Grid 中设置可滚动的内容区域，你需要将内容包装在一个容器内，并将该容器放置在 CSS Grid 的单元格中。此外，还需要将包含该内容的容器设置为垂直滚动并固定高度。
以下是示例代码：
-- -------------------- ---- -------
---- -----------------------
---- ---------------------------
---- ----------------
---- -------------------
---------- -----------
------
------
---- ---------------------------
-------- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---- ------------------- ---- --- ----- ------- ------ --------- ------- - ------- - ----------------- ----- ------ ----- -------- ----- - -------- - ----------- ----- - ----------- - ------- ----- ----------- ----- - ------- - ----------------- ----- ------ ----- -------- ----- -
在上面的代码中，我们创建了一个名为 “scrollable” 的容器，并将其包装在具有 CSS Grid 布局的 .content 容器中。然后，将 .content 容器设置为垂直滚动，以便在内容溢出时可以滚动该元素。最后，将 “scrollable” 容器设置为具有固定高度并垂直滚动，以便当内容太长时可以滚动该容器。
CSS Grid 中的一些技巧和最佳实践
始终设置固定高度
在设置可滚动的内容区域时，始终需要设置一个固定的高度。这是因为如果没有设置固定高度，容器将变得无限高并覆盖整个屏幕，这显然不是我们想要的结果。
在制定网格布局时，使用 minmax() 函数
在制定网格布局时，使用 minmax() 函数可以帮助我们自适应不同的屏幕大小。minmax() 函数接受两个参数：最小值和最大值。这使我们可以在确保网格具有最小尺寸的情况下，自动扩展网格的大小以适应更大的屏幕尺寸。
例如，以下代码将使我们的网格具有两列，其中第一列具有最小尺寸为 300px，第二列最大尺寸为 1fr（它将自适应任何空闲空间）：
grid-template-columns: 300px minmax(1fr, auto);
始终使用 grid-gap 设置间距
在 CSS Grid 中设置间距时，请始终使用 grid-gap 属性而不是 margin。grid-gap 可以帮助我们更好地控制单元格之间的间距，并避免在布局过程中出现任何不良效果。
例如，以下代码将在每个单元格的左侧和底部添加 1rem 的间距：
grid-gap: 1rem;
结论
在 CSS Grid 中设置可滚动的内容区域不是一件难事，但是需要注意一些细节。遵循我们上面提到的技巧和最佳实践，可以帮助你更好地掌握 CSS Grid，并为你未来的项目打下一个坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b41e2d91dce0dc888d831