在前端开发中，横向滚动是一个常见的需求。在过去，我们可能会使用 float 或者 inline-block 等方式来实现横向滚动，但这些方式都存在一些问题，比如布局不稳定、兼容性差等。而随着 CSS Grid 的出现，我们可以使用它来实现横向滚动，不仅能够解决上述问题，还能够更加灵活地控制布局。
CSS Grid 简介
CSS Grid 是一种二维网格布局系统，它可以让我们更加方便地控制布局。CSS Grid 通过将容器分成行和列来布局，可以让我们更加灵活地控制网格中的元素。CSS Grid 有两个重要的概念：容器和项目。
- 容器是我们要进行布局的元素，它可以通过
display: grid来定义。 - 项目是容器中的子元素，它们可以被分配到网格的单元格中。
实现横向滚动的技巧
下面，我们将介绍如何使用 CSS Grid 实现横向滚动。
步骤一：定义容器
首先，我们需要定义一个容器来进行布局。在这个容器中，我们可以定义行和列的数量以及它们的大小。在这里，我们将使用 grid-template-columns 来定义列的数量和大小，使用 grid-auto-rows 来定义行的大小。同时，我们还需要设置容器的宽度和高度，以及 overflow-x: scroll 来实现横向滚动。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
width: 100%;
height: 200px;
overflow-x: scroll;
}步骤二：定义项目
接下来，我们需要定义容器中的项目。在这里，我们可以使用 grid-column 和 grid-row 来指定项目所在的单元格。对于我们要实现的横向滚动，我们需要将项目放在同一行，并且跨越多个列。在这里，我们将使用 grid-column 来指定项目跨越的列数。
.item {
grid-column: span 1;
}步骤三：响应式布局
最后，我们需要考虑响应式布局。在移动设备上，我们可能需要将容器的行数改为 1，以便在小屏幕上显示。为了实现响应式布局，我们可以使用媒体查询来设置容器的行数。
@media screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}示例代码
下面是一个完整的示例代码，可以直接复制到浏览器中查看效果。
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --------- -----
--------------- ------
------ -----
------- ------
----------- -------
-
----- -
------------ ---- --
----------------- -----
-------- -----
---------------- -------
------------ -------
---------- -----
-
------ ------ --- ----------- ------ -
---------- -
---------------------- --------- -----
-
-总结
在本文中，我们介绍了如何使用 CSS Grid 实现横向滚动。通过使用 CSS Grid，我们可以更加灵活地控制布局，并解决传统布局方式的一些问题。同时，我们还介绍了响应式布局的实现方式，以便在不同设备上都能够正常显示。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6641898fd3423812e4f87b7b