CSS Grid 网格布局是一种强大的布局方式，可以使我们更轻松地创建复杂的网格布局。在 CSS Grid 中，我们可以使用网格容器和网格项来定义我们的布局。而在最新的 CSS Grid 规范中，我们还可以使网格项中的内容可滚动，从而实现更多的布局效果。
实现可滚动的网格项
要实现可滚动的网格项，我们需要使用 CSS 属性 overflow 和 grid-area。其中，overflow 属性可以控制元素的滚动方式，而 grid-area 属性可以将网格项定位到网格容器中的指定区域。
// www.javascriptcn.com code example
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
overflow: auto;
grid-area: 2 / 2 / 3 / 3;
}在上面的代码中，我们首先定义了一个网格容器，它包含了 3 列和 3 行，并且每个网格项之间有 20px 的间隔。然后，我们定义了一个网格项，并将它定位到了网格容器的第二行第二列的区域。最后，我们给网格项添加了 overflow: auto 属性，这样当网格项中的内容超出了容器的大小时，就会自动出现滚动条。
示例代码
下面是一个完整的示例代码，其中包含了一个可滚动的网格项：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Grid 网格布局子元素可滚动</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
overflow: auto;
grid-area: 2 / 2 / 3 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis euismod, bibendum sapien et, sodales nulla. Fusce et mauris massa. Sed venenatis euismod tellus, nec rutrum ex commodo vel. Nulla facilisi. Morbi nec faucibus odio. Sed pharetra lobortis ex, eu volutpat orci vehicula sit amet. Morbi id elit id ligula suscipit lacinia. Nulla facilisi. Mauris quis sapien euismod, molestie orci sed, gravida mi.</p>
<p>Aliquam vel nunc a sem faucibus euismod. Fusce euismod molestie eros vitae tristique. Nulla facilisi. Sed vitae sapien et magna vestibulum congue. Donec euismod pulvinar magna, in semper velit tristique in. Aliquam eget odio lectus. Nulla facilisi. Sed vitae tincidunt nisl. Sed in consectetur enim, eu aliquet lacus. Cras iaculis, tortor non ornare placerat, odio turpis vestibulum enim, at malesuada arcu magna vel augue. Praesent non leo nec velit aliquet maximus. In hac habitasse platea dictumst. Aenean lobortis odio vitae justo pharetra, vel dignissim lectus malesuada. Donec lectus odio, venenatis sit amet felis eu, ultrices ullamcorper velit.</p>
<p>Etiam pellentesque, quam a efficitur auctor, urna magna bibendum tellus, vel posuere ante dui et nunc. Quisque rhoncus, justo ut dignissim pulvinar, ex neque convallis turpis, ut tempus lacus turpis ut quam. Nunc eget ex id sapien dignissim consectetur. Nam euismod quis lorem eu sagittis. Sed vel dolor gravida, sagittis ex eu, vulputate enim. Nulla ultricies, odio a dictum dapibus, nulla eros aliquam tellus, eget finibus sapien mauris vel nibh. Sed nec mauris nec quam cursus ullamcorper. Sed auctor, nisi vel porta porttitor, ante mauris eleifend tortor, eget hendrerit velit massa et mi. Vivamus ut ipsum euismod, luctus arcu ac, hendrerit velit. Donec fringilla, mauris vel rutrum venenatis, felis odio placerat magna, eu iaculis elit massa quis odio. Quisque vel nisi quis risus ornare vulputate. Ut aliquam, nisl eget maximus bibendum, lectus nibh scelerisque lorem, vel malesuada nibh tellus vel libero.</p>
<p>Quisque ac tellus vel libero aliquet bibendum. Sed nec ligula vitae nulla faucibus facilisis. Donec vel dolor nisi. Aliquam erat volutpat. Sed ut nisl ac augue bibendum efficitur. Mauris tristique ut massa sed pharetra. Sed ut purus vitae elit semper dapibus. Morbi ut lorem ac odio malesuada efficitur. Fusce eu lacus vel quam malesuada faucibus. Nullam pulvinar, quam et varius efficitur, justo arcu dignissim felis, eu tempor nulla augue at lectus. Donec pharetra, mauris et mollis vestibulum, mi sapien auctor odio, a volutpat eros augue vel justo. Fusce bibendum, libero vitae fringilla mattis, velit velit aliquet lacus, nec tristique enim nisi id metus. Nam interdum, metus vel pretium bibendum, mauris quam ornare turpis, non commodo erat lectus eget velit.</p>
</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>学习和指导意义
CSS Grid 网格布局是一种非常强大的布局方式，它可以帮助我们更轻松地创建复杂的网格布局。而在最新的 CSS Grid 规范中，我们还可以使网格项中的内容可滚动，从而实现更多的布局效果。这种技术可以被广泛地应用于各种网站和应用程序的布局中，可以让我们更加灵活地控制页面的布局和内容。
在学习和使用 CSS Grid 网格布局时，我们需要注意一些细节和技巧。例如，我们需要合理地使用网格容器和网格项的属性，以及掌握一些常用的布局方式和技巧。同时，我们还需要注意浏览器的兼容性和性能问题，以便更好地应用这种技术。
总之，CSS Grid 网格布局是一种非常有用的前端技术，它可以帮助我们更轻松地创建复杂的网格布局，并使网格项中的内容可滚动，从而实现更多的布局效果。通过深入学习和掌握这种技术，我们可以更好地应用它于实际项目中，从而提高我们的前端开发能力和水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d5650ea941bf7134a0ad16