在前端开发中，网页布局一直是一个非常重要的话题。而在过去，我们常常需要使用 float、flexbox 等方式来进行网页布局。而近年来，新一代的网页布局方式——CSS Grid，逐渐成为了大家新的选择。在实现网站布局时，CSS Grid 相比旧有的布局方法具有更好的可读性、可扩展性以及易于维护等诸多优点。在本文中，我们将介绍如何使用 CSS Grid 实现水平滚动的网页布局。
创建水平滚动的 GRID 布局
在 CSS Grid 中，我们需要首先定义一个网格容器。可以使用 display: grid; 来定义一个网格容器。然后在容器中定义一些行和列，构成一个网格。下面是一个简单的例子：
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 200px;
}在这个例子中，我们使用 grid-template-columns 定义了容器中有五个列，并且每个列的宽度都是相同的。使用 grid-template-rows 定义了容器中只有一行，高度为 200px。
为了使这个网格能够出现水平滚动条，我们需要添加 overflow-x: auto; 属性。代码如下：
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 200px;
overflow-x: auto;
}现在，我们已经成功创建了一个水平滚动的 GRID 布局。但是，这个布局中只有一个单元格，并不是我们想要的。
将网格分为多个单元格
我们可以使用 grid-column 和 grid-row 来定义一个元素占据网格的行和列。例如：
.item {
grid-column: span 2;
grid-row: 1;
}这个元素将会占据两个单元格。现在，我们来创建一个比较实际的例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- ------ ----------- ----- - ----- - ----------------- ----- ----------- ------- ------------ ----- ---------- ----- - ---- - ------------ ---- -- --------- -- - ---- - ------------ ---- -- --------- -- - ------ - ------------ ---- -- --------- -- - ----- - ------------ ---- -- --------- -- - ----- - ------------ ---- -- --------- -- -
在这个例子中，我们将容器分为了 5 个列，并且每个列的宽度都是相等的。我们用 grid-column 和 grid-row 来定义了五个元素，使它们占据了不同数量的单元格。现在你可以在浏览器上查看结果了。
网格中的间距
为了让网格中的单元格与单元格之间存在一些间距，我们可以使用 grid-gap 或者 margin 属性。例如，在网格容器中定义 20px 的间距：
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 200px;
grid-gap: 20px;
overflow-x: auto;
}这个属性在网格容器中工作得很好，但在单元格内部的空白区域则没有效果。如果你想设置单元格内部的间距，可以使用 padding 属性。
总结
经过我们的介绍，相信大家已经可以使用 CSS Grid 实现水平滚动的网页布局了。CSS Grid 更加灵活，易于扩展的特点，使得它成为网页开发的新首选。但是 CSS Grid 布局这个话题还有很多内容，希望本文能为大家入门提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e3ab448841e9894ac1e83