在前端开发中，布局一直是比较棘手的问题，而 nestable-grid 包提供了一个比较简单的解决方案。本文将介绍如何使用 npm 包 nestable-grid 来进行响应式布局。
准备工作
首先，我们需要在项目中安装 nestable-grid 包，可以使用以下命令：
npm install nestable-grid
然后，在 HTML 文件中引入样式文件和 JS 文件：
<link rel="stylesheet" href="node_modules/nestable-grid/dist/nestable-grid.min.css"> <script src="node_modules/nestable-grid/dist/nestable-grid.min.js"></script>
使用方法
nestable-grid 包提供了两种方式来设置布局，一种是使用自定义 HTML 标签，另一种是使用 CSS 类。
自定义 HTML 标签
在 HTML 文件中，使用自定义标签 <ng-container> 来定义网格布局，在标签中使用 <ng-col> 来定义列。例如：
<ng-container> <ng-col size="1-2">第一列</ng-col> <ng-col size="1-2">第二列</ng-col> </ng-container>
在上面的代码中，两个 <ng-col> 元素会自动分配相等的宽度，并且将根据屏幕宽度自动响应式布局。
CSS 类
在 HTML 文件中，可以直接使用 CSS 类名来设置布局，例如：
<div class="ng-container"> <div class="ng-col ng-col-6">第一列</div> <div class="ng-col ng-col-6">第二列</div> </div>
在上面的代码中，两个 div 元素将会占据网格的 6/12，即半个屏幕的宽度，并且会根据屏幕宽度自动响应式布局。
嵌套
nestable-grid 包支持嵌套的布局，例如：
-- -------------------- ---- -------
--------------
------- -----------
---- ---------------------
---- ------------- ---------------------
---- ------------- ---------------------
------
---------
------- -----------------------
---------------在上面的代码中，第一列又使用了一个 <ng-container> 来定义嵌套布局，内部也是两个 <ng-col> 分别占据半个屏幕的宽度。
更多设置
nestable-grid 包提供了更多的设置来控制布局，例如：
gutter设置网格之间的间距，默认值为30px。breakpoints设置响应式断点，例如{ small: 0, medium: 640, large: 1024 }表示小屏幕、中屏幕和大屏幕。vertical-align设置网格中的内容垂直对齐方式，默认值为top。horizontal-align设置网格中的内容水平对齐方式，默认值为left。
在使用时可以按需进行设置。
示例代码
下面是一个完整的示例代码，包括了自定义标签和 CSS 类两种布局方式：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------------- ------------
----- ---------------- -------------------------------------------------------------
-------
------
--------------
--------------
------- -----------------------
------- -----------------------
---------------
------- ------
---- ---------------------
---- ------------- -------------------
---- ------------- -------------------
------
------- --------------------------------------------------------------------
-------
-------总结
通过本文介绍，我们学习了如何使用 npm 包 nestable-grid 来进行响应式布局。通过自定义标签或者 CSS 类的方式，可以简单地定义网格布局，并且支持嵌套和更多的设置，能够满足我们对布局的各种需求。希望对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005522781e8991b448cfa67