npm 包 dead-simple-grid-npm 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 dead-simple-grid-npm 使用教程

前言

在目前的前端开发中，设计布局是非常重要的一部分，然而，传统的设计布局方式可能会导致困难，例如，不同屏幕大小的适应性，因此，项目需要一个基于网格的布局框架来保证响应式和可扩展性。Dead Simple Grid 就是这样一种基于网格的布局框架，它是一个免费的开源包，提供了基于 CSS 网格的设计布局，具有灵活性以及易用性，在此文中，我们将介绍 Dead Simple Grid npm 包的使用方法。

Dead Simple Grid npm 包的安装

首先，我们需要安装 Dead Simple Grid 包，可以使用 npm 命令来进行安装:

--- ------- --------------------

安装所有包之后，在 CSS 样式表中调用 Dead Simple Grid，示例代码如下：

----- ---------------- ----------------------------------------------------------

Dead Simple Grid 的使用

使用 Dead Simple Grid 的方式，类似于其他 CSS 框架，可以将网格包含在外层，如：

---- ------------------
  ---- ------------
    ---- --------------
      ----------
    ------
    ---- --------------
      ----------
    ------
  ------
------

其中，

.container 容器是必须的，在其内包含 .row 行，行内包含各个 .col-* 元素
.row 行必须出现在 .container 中，不包含其它元素
.col-* 元素必须出现在 .row 行内，用数字表示其宽度

Dead Simple Grid 的样式表

该样式表包含以下分类：

容器('container') - 提供非常基本的样式
行('row') - 提供负间距(negative margin)而保证每行内 .col 元素呈均匀分布
.col-* 元素 - 提供了内容块的基本样式

容器样式

Dead Simple Grid 提供 .container 样式作为网格容器，并提供以下类作为子类：

.container-max-width 类可用于覆盖默认容器最大宽度。

行样式

Dead Simple Grid 提供 .row 样式作为网格行，并提供以下类作为子类：

.row-lg-gutter 类可用于开启更大的手机和小尺寸的笔记本电脑之间的“深谷”，增加垂直空间。
.row-magic 类可用于网格行内的 .col 元素平衡边距。这很有用，特别是当您在网格行中有一个基数数量的项目时。

.col- 元素样式*

Dead Simple Grid 提供 .col-* 样式来定义每个区块，并提供以下样式设置：

.col-1 〜 .col-12 类表示区块将占用屏幕的百分比
.col-push-* 可用于将 .col 元素推到右边
.col-pull-* 可用于将 .col 元素拉倒左边

Dead Simple Grid 的示例代码

以下是 Dead Simple Grid 的示例代码：

-------- ------------------
  ---- ------------
    ---- ------------- ----------
      --------------
    ------
    ---- ------------- ----------
      --------------
    ------
  ------
  ---- ------------
    ---- ------------- ----------
      --------------
    ------
    ---- ------------- ----------
      --------------
    ------
    ---- ------------- ----------
      --------------
    ------
    ---- ------------- ----------
      --------------
    ------
  ------
----------

该代码将在手机上每列占用12列，在大屏幕上占用6列，并分成两个区块。另外一行中将在手机屏幕上占据12列，在大屏幕上占4列，并分为四个区块。

Dead Simple Grid 的指导意义

Dead Simple Grid 是一个轻量级且易用的设计布局框架，提供基于 CSS 网格的设计布局，使得响应式和可扩展性变得容易，使用 Dead Simple Grid，可以避免使用其它更复杂的布局框架，例如 BootStrap，Google Material Design 等，极大地提高了生产效率，减少了编写代码的时间成本，具有很高的实用性。

结论

我希望这篇文章已经介绍了 Dead Simple Grid 的基本知识及其使用方法，您现在应该能够使用 Dead Simple Grid 了，Dead Simple Grid 是一个非常好的 CSS 网格框架，可以满足绝大多数的设计布局需求，它易用性高，灵活性好，运行速度快，如果您对其感兴趣，请尝试使用它。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/60055eb381e8991b448dc598