在前端开发中，展示数据和布局通常是最重要的部分之一。cssrecipes-grid 是一个使用简单且灵活的 CSS 网格系统，可以帮助你快速地创建漂亮的网站布局。本文将介绍如何使用 npm 包 cssrecipes-grid。
安装
首先，在命令行中运行以下命令进行安装：
npm install cssrecipes-grid --save
这将安装 cssrecipes-grid，并将其添加到您的项目依赖中。
使用
现在，您可以在您的项目中引入 cssrecipes-grid。你可以通过复制 node_modules/cssrecipes-grid/grid.css 文件到你的项目中，然后通过 <link> 标签将其包含在你的 HTML 文件中，或者通过任意一个构建工具进行打包、编译等处理 。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- ----------------
-------
------
---- -----------------------
---- -----------------
---- --------------- ------------
------- -- ------ -----
------
---- --------------- ------------
------- -- ------ -----
------
------
------
-------
-------上面的代码片段创建了两个占据网格容器的列，每个列都占据了整个容器的一半空间。可以根据自己的需要设置不同的列宽度和行高。
网格容器
网格容器是一个带有 .grid-container 类的 DIV 元素。默认情况下，容器将使用 12 格的网格布局。您可以使用以下类名调整默认设置：
.grid-container-xs：适用于小屏幕设备（<576px）.grid-container-sm：适用于中等屏幕设备（≥576px）.grid-container-md：适用于大屏幕设备（≥768px）.grid-container-lg：适用于超大屏幕设备（≥992px）.grid-container-xl：适用于极大屏幕设备（≥1200px）
例如，下面的代码片段创建了一个适用于中等屏幕设备的网格容器。
<div class="grid-container-sm">
<!-- Your content here -->
</div>网格行和列
网格行是一个带有 .grid-row 类的 DIV 元素。每一行应该包含若干个网格列。您可以在行上使用以下类名来调整样式：
.grid-row-spacing-none：无空白间距.grid-row-spacing-xs：紧缩间距（5px）.grid-row-spacing-sm：适度间距（10px）.grid-row-spacing-md：宽松间距（20px）.grid-row-spacing-lg：较大间距（30px）
例如，下面的代码片段创建了一个带有 20px 间距的网格行。
<div class="grid-row grid-row-spacing-md">
<!-- Your columns here -->
</div>网格列是带有 .grid-col 类的 DIV 元素。默认情况下，每个列都占据容器的一等份。您可以在列上使用以下类名来调整样式：
.grid-col-1到.grid-col-12：指定列的宽度
例如，下面的代码片段创建了两个占据网格容器相等部分的列。
<div class="grid-container">
<div class="grid-row">
<div class="grid-col grid-col-6">
<p>This is column 1</p>
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/47858) ，转载请注明来源
[https://www.javascriptcn.com/post/47858](https://www.javascriptcn.com/post/47858)