简介
materialize-grid-list是一个基于Materialize CSS框架的网格列表库，它可以轻松地创建具有卡片式布局的响应式网格。
安装
你可以通过npm安装materialize-grid-list：
npm install materialize-grid-list
如果你想从源代码构建，你也可以从GitHub上获取最新版本，并在项目根目录下运行以下命令：
npm install npm run build
使用
在使用materialize-grid-list之前，请确保你在项目中已经使用了Materialize CSS。
在HTML中引入materialize-grid-list的样式和脚本：
<link rel="stylesheet" href="path/to/materialize-grid-list.css"> <script src="path/to/materialize-grid-list.js"></script>
创建一个具有卡片式布局的网格列表：
-- -------------------- ---- -------
---- ------------------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
------你可以在div.grid-list上使用以下自定义属性来配置自己的网格列表：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| data-columns | 数字 | 3 | 网格列数。 |
| data-gutter | 数字 | 16 | 列之间的间距。 |
| data-row-height | 数字或字符串 | 无 | 相邻行之间的高度。 |
示例
你可以根据自己的需要进行更改。以下是一个示例模板，供你参考：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------------------------
----- ---------------- ----------------------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- ------------------
--------------------------------
---- ----------------- -------------- -------------- ----------------------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
---- ------------------
---- -------------------
--------- ------
-------------- -----
------
------
------
------
------- ----------------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
-------
-------参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1b81e8991b448dcaf2