前言
网站的商品列表是非常常见的一种布局方式，如何实现这样一个网格布局呢？今天我们介绍一种 CSS Grid 布局的实现方式，它可以轻松地实现类似商品列表的网格布局。
本文将分为以下几个部分：
- CSS Grid 布局简介
- 实例分析：电商商品列表网格布局
- 代码实现及详解
CSS Grid 布局简介
CSS Grid 布局是 CSS3 新增的一种布局方式，它能够通过网格化的方式定义网页布局。CSS Grid 布局与传统的布局方式相比，其优点在于其更加灵活，可扩展性更强，能够很好的适应不同大小和不同形状的屏幕。
其中，定义 CSS Grid 的样式主要包括以下几个属性：
display: grid： 定义元素为网格布局grid-template-columns和grid-template-rows： 定义网格的行和列，可以用像素、百分比、自适应单位等来定义grid-column-start、grid-column-end、grid-row-start和grid-row-end：定义各个网格的开始和结束行列位置
实例分析：电商商品列表网格布局
我们可以通过下面这个图片来进行例子的分析
以上图为例，我们可以将其分为 4 行 3 列的网格布局，每个网格用来显示一个商品的图片、名字以及价格。其中，第一个商品跨了第一列和第二列，第二个商品跨了第二行和第三行。
代码实现及详解
通过 Grid 布局实现这个网格布局，代码如下：
HTML：
-- -------------------- ---- -------
---- -------------------
---- ----------------- --------------
---- ----------------
------------
--------------
------
---- ----------------- --------------
---- ----------------
------------
--------------
------
---- ----------------- --------------
---- ----------------
------------
--------------
------
---- ----------------- --------------
---- ----------------
------------
--------------
------
---- ----------------- --------------
---- ----------------
------------
--------------
------
---- ----------------- --------------
---- ----------------
------------
--------------
------
------CSS：
-- -------------------- ---- ------- ----------- - -------- ----- ---------------------- --------- ----- --------- ----- - ------------- - ------------ ---- -- - ------------- - --------- ---- -- - ----------- - ----------------- ----- -------- ----- ----------- ------- - ----------- --- - ---------- ----- - ----------- --- ----------- - - ------- ---- -- -
以上代码中，我们使用了 display: grid 来定义 goods-list 元素为网格布局。通过 grid-template-columns 来定义网格布局的列数为 3，并且实现自适应宽度。
通过 grid-gap 定义网格的间隔大小。由于第一个商品同时占据了第一列和第二列，所以我们使用 grid-column: span 2 来定义其跨越两列。
同理，由于第二个商品跨了第二行和第三行，我们使用 grid-row: span 2 来定义其跨越两行。
最后，我们对每个商品进行基本的样式设置，如背景色、内边距、文字居中对齐等。
总结
在实现这个实例的过程中，我们可以看到 CSS Grid 布局的强大之处，在定义网格布局方面，灵活性和可扩展性都非常强。
在实际的应用中，我们还可以使用 CSS Grid 来实现更为繁杂的网格布局，希望这篇文章能够对您理解 CSS Grid 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65214f9495b1f8cacd8d27a2