grid-scss

1.1.1 • Public • Published

grid-scss

NPM version Build Status GitHub forks GitHub stars NPM download GitHub license

Grid Layout 是一种基于二维网格的布局系统,旨在完全改变我们设计基于网格的用户界面的方式,弥补网页开发在二维布局能力上的缺陷,可以通过 bower 和 npm 下载

参考

使用 SASS 语法编写,使用 gulp 前端打包工具进行打包

针对 Grid Layout 布局方式的详细介绍:Grid 栅格布局 或者 Grid 栅格布局

download

git clone https://github.com/vxhly/grid-scss.git

npm

npm install grid-scss --save

bower

bower install grid-scss --save

use

<link href="./grid-scss.min.css">
 
# or 
 
import 'grid-scss/src/grid-scss.scss'

为什么需要 Grid Layout

grid 栅格布局,二维布局模块,具有强大的内容尺寸和定位能力,适合需要在两个维度上对齐内容的布局
像表格一样,网格布局使作者能够将元素对齐到列和行中。但是,使用CSS网格的布局要比使用表格要多得多。
例如,一个网格容器的子元素可以自己定位,因此它们实际上是重叠的,并且与CSS定位的元素类似。
CSS Grid Layout擅长将页面划分为主要区域,或根据HTML基元构建的控件的部分之间的大小,位置和层次来定义关系。

support

2017 年3 月,Chrome、Firefox将开启默认支持。

当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式

support

Chrome

在浏览器中输入:chrome://flags/#enable-experimental-web-platform-features

然后,找到 Experimental Web Platform features,点击启用

然后重启浏览器,然后便能体验到了。

Opera

在浏览器中输入:opera://flags/#enable-experimental-web-platform-features

然后,找到 Enable experimental Web Platform features,点击 启用

同样,重启浏览器

Safari

在 safari TP 版本以及 WebKit Nightly 中可以使用。不过比较麻烦,需要 IOS10.12 以上。

启用方式:Develop > Expermiental Features > CSS Grid

Firefox

在浏览器中输入:about:config

然后,输入 layout.css.grid,双击即可激活。

同样,重启浏览器

menuTree

|- src
  |- _base.scss       => 清除浏览器默认样式,更完整的清除浏览器样式可引入  [normalize.css](https://github.com/necolas/normalize.css)
  |- _grid-name.scss  => 定义区域布局
  |- _grid.scss       => 开启 Grid Layout 布局,等分区域布局
  |- _param.scss      => 全局变量(如需自定义,修改本文件即可)
  |- grid-scss.scss   => 主文件

use

<link rel="stylesheet" href="./dist/css/grid-scss.css">
 
<!-- 经典布局(header aside main footer),从上至下 ,从左至右 -->
<!-- 子区域采用 grid-header grid-aside grid-main grid-footer 来命名区域 -->
<!-- 采用命名区域的时候,元素顺序可以不遵循从上至下 ,从左至右,反之则需要  -->
<div grid grid-name="[header main footer]" class="info">
  <div grid-header>header</div>
  <div grid-main>Main</div>
  <!-- <div grid-aside>Aside</div> -->
  <div grid-footer>Footer</div>
</div>
  • grid => 开启 Grid Layout 布局

    • grid="col-* row-*" 设置 * 取值为 number,范围 1~12,col- 设置有几列,row- 设置有几行

    • grid="col-auto" 可创建 n 个网格,宽度最小值 100px

    • grid="flow:col" 流布局(从左至右)

    • grid="flow:row" 流布局(从上至下)

    • grid="col--* row--*" 设置 * 取值为 string,取值 (auto, normal, start, end, center, stretch, baseline), col--* 设置沿着列轴线(column axis) 对齐方式, row--* 沿着行轴线(row axis) 线上对齐方式

      • grid-box--col-* 设置 * 取值为 string,取值 (auto, normal, start, end, center, stretch, baseline), 沿着列轴线(column axis)对齐网格项内的内容此值适用于单个网格项内的内容
      • grid-box--row-* 设置 * 取值为 string,取值 (auto, normal, start, end, center, stretch, baseline),沿着 行轴线(row axis) 对齐网格项内的内容此值适用于单个网格项内的内容
    • grid="col::* row::*" 设置 * 取值为 string,取值 (auto, normal, start, end, center, stretch, baseline), col::* 设置列轴线(column axis) 对齐网格, row:* 设置行轴线(row axis) 对齐网格

  • grid-name => 指定布局方式(header、footer 默认高 60px,aside 默认高 150px, main 自动适配,区域与区域之间的间距默认为 1.5rem,值的写法应该遵循从上至下,从左至右原则,从上至下使用 [] 将区域名字括起来,区域名字使用空格相隔,从左至右使用 () 将区域名字括起来,区域名字使用空格相隔),以下为 grid-name 的可选值

    • [header main]

      ----------
      | header |
      ----------
      | main   |
      ----------
      
      • [main footer]

        ----------
        | main   |
        ----------
        | footer |
        ----------
        
    • [header main footer]

      ----------
      | header |
      ----------
      | main   |
      ----------
      | footer |
      ----------
      
    • (aside main)

      ----------------
      | aside | main |
      ----------------
      
    • [header (aside main)]

      ----------------
      | header       |
      ----------------
      | aside | main |
      ----------------
      
    • [header (aside [main footer])]

      ------------------
      | header         |
      ------------------
      |       | main   |
      | aside |--------|
      |       | footer |
      ------------------
      
    • (aside [header main])

      ------------------
      |       | header |
      | aside |--------|
      |       | main   |
      ------------------
      
    • (aside [header main footer])

      ------------------
      |       | header |
      |       |--------|
      | asdie | main   |
      |       |--------|
      |       | footer |
      ------------------
      
    • [header (aside main) footer]

      ----------------
      | header       |
      |--------------|
      | asdie | main |
      |--------------|
      | footer       |
      ----------------
      
    • [(aside [header main]) footer]

      ------------------
      |       | header |
      | asdie |--------|
      |       | main   |
      |----------------|
      | footer         |
      ------------------
      
    • [(asdie main) footer]

      ----------------
      | asdie | main |
      |--------------|
      | footer       |
      ----------------
      

Package Sidebar

Install

npm i grid-scss

Weekly Downloads

3

Version

1.1.1

License

MIT

Unpacked Size

53.7 kB

Total Files

17

Last publish

Collaborators

  • vxhly