使用CSS网格的水平滚动-DEV365 开发者社区

在上一篇文章中，我展示了how to do horizontal scrolling using flexbox。最近，我被问到如何进行相同的滚动，但是使用CSS网格。本文向您展示了如何使用CSS网格进行水平滚动。

设置我的项目

此项目将包含以下文件：

index.html
style.css

它还将包含一个称为images的文件夹。该文件夹内将是五个图像。文件夹中的图像是：

image1.jpg
image2.jpg
image3.jpg
image4.jpg
image5.jpg

我们的基本网站

index.html文件包含我们基本网站的代码。它将在水平滚动中显示我们的五个图像。

这是我的index.html文件的内容：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid Horizontal Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <img src="images/image1.jpg" alt="image1">
    <img src="images/image2.jpg" alt="image2">
    <img src="images/image3.jpg" alt="image3">
    <img src="images/image4.jpg" alt="image4">
    <img src="images/image5.jpg" alt="image5">
    <!-- more images -->
</div>
</body>
</html>

让我们浏览此代码。在head中，我有一个指向我的style.css文件的链接。我稍后将介绍此文件。

网站的主体包含一个带有a.class的container的div。

div内部是五个img元素，指向位于images文件夹中的五个图像。

就是我们的index.html文件。

添加图像的水平滚动

制作图像的秘密调味料水平滚动是我们的CSS代码。

这是style.css文件中的代码：

.container {
    display: grid;
    grid-auto-columns: calc(100% - 4rem);
    grid-auto-flow: column;
    grid-gap: 16px;
    overflow-x: auto;
}

.container img {
    width: 100%;
    height: auto;
}

让我们浏览此代码。

display: grid;-这将容器元件设置为一个网格容器，这意味着其子元素将被放置在行和列的网格上。

grid-auto-columns: calc(100% - 4rem);-这将在网格中创建的任何其他列的宽度设置为容器减去4REM的完整宽度（如果根字体大小为16px，则与64px相同。

）。

grid-auto-flow: column;-这指定新行应作为新列创建，而不是新行。

grid-gap: 16px;-这将网格单元之间的间隙设置为16px。

overflow-x: auto;-如果网格的内容水平溢出容器元件，则会导致显示水平滚动条。

.container img { width: 100%; height: auto; }-这设置了所有IMG元素的宽度，这些IMG元素是.Container元素的子元素的100％，并将其设置为根据其长宽比自动计算的高度。

工作代码

这是一个动画gif，显示我们的水平滚动。

结论

想花时间展示如何使用CSS网格进行水平滚动。如果您想查看how to do this using Flexbox check out my other article。