grid-scss/dist/grid-scss.css

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

/*!
 * grid-scss - Grid 网格布局神器，Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷,可以通过 bower 和 npm 下载
 * 
 * @version v1.0.10
 * 
 * @author vxhly <pengchengou@gmail.com>
 * 
 * @link https://github.com/vxhly/grid-scss#readme
 * @license MIT
 */
@charset 'UTF-8';

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, Helvetica, 'Microsoft YaHei', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #666;
  background-color: #fff;
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

[grid] {
  display: grid;
}

[grid] img {
  -o-object-fit: cover;
  object-fit: cover;
}

[grid~='row-1'] {
  grid-template-rows: repeat(1, 1fr);
}

[grid~='col-1'] {
  grid-template-columns: repeat(1, 1fr);
}

[grid~='row-2'] {
  grid-template-rows: repeat(2, 1fr);
}

[grid~='col-2'] {
  grid-template-columns: repeat(2, 1fr);
}

[grid~='row-3'] {
  grid-template-rows: repeat(3, 1fr);
}

[grid~='col-3'] {
  grid-template-columns: repeat(3, 1fr);
}

[grid~='row-4'] {
  grid-template-rows: repeat(4, 1fr);
}

[grid~='col-4'] {
  grid-template-columns: repeat(4, 1fr);
}

[grid~='row-5'] {
  grid-template-rows: repeat(5, 1fr);
}

[grid~='col-5'] {
  grid-template-columns: repeat(5, 1fr);
}

[grid~='row-6'] {
  grid-template-rows: repeat(6, 1fr);
}

[grid~='col-6'] {
  grid-template-columns: repeat(6, 1fr);
}

[grid~='row-7'] {
  grid-template-rows: repeat(7, 1fr);
}

[grid~='col-7'] {
  grid-template-columns: repeat(7, 1fr);
}

[grid~='row-8'] {
  grid-template-rows: repeat(8, 1fr);
}

[grid~='col-8'] {
  grid-template-columns: repeat(8, 1fr);
}

[grid~='row-9'] {
  grid-template-rows: repeat(9, 1fr);
}

[grid~='col-9'] {
  grid-template-columns: repeat(9, 1fr);
}

[grid~='row-10'] {
  grid-template-rows: repeat(10, 1fr);
}

[grid~='col-10'] {
  grid-template-columns: repeat(10, 1fr);
}

[grid~='row-11'] {
  grid-template-rows: repeat(11, 1fr);
}

[grid~='col-11'] {
  grid-template-columns: repeat(11, 1fr);
}

[grid~='row-12'] {
  grid-template-rows: repeat(12, 1fr);
}

[grid~='col-12'] {
  grid-template-columns: repeat(12, 1fr);
}

[grid~='flow:col'] {
  grid-auto-flow: column;
}

[grid~='flow:row'] {
  grid-auto-flow: row;
}

[grid-name] > [grid-header] {
  grid-area: header;
}

[grid-name] > [grid-main] {
  grid-area: main;
}

[grid-name] > [grid-aside] {
  grid-area: aside;
}

[grid-name] > [grid-footer] {
  grid-area: footer;
}

/*
 * 写法应该遵循从上至下，从左至右原则，
 * 从上至下使用 [] 将区域名字括起来，区域名字使用空格相隔
 * 从左至右使用 () 将区域名字括起来，区域名字使用空格相隔
 */
[grid-name='[header main]'] {
    /**
   *   ----------
   *   | header |
   *   ----------
   *   | main   |
   *   ----------
   */
  grid-template-areas: 'header' 'main';
  grid-template-rows: 60px auto;
}

[grid-name='[main footer]'] {
    /**
   *   ------------
   *   | main     |
   *   ------------
   *   | footer   |
*   ------------
   */
  grid-template-areas: 'main' 'footer';
  grid-template-rows: auto 60px;
}

[grid-name='[header main footer]'] {
    /**
   *   ----------
   *   | header |
   *   ----------
   *   | main   |
   *   ----------
   *   | footer |
   *   ----------
   */
  grid-template-areas: 'header' 'main' 'footer';
  grid-template-rows: 60px auto 60px;
}

[grid-name='(aside main)'] {
    /**
   *   ----------------
   *   | aside | main |
   *   ----------------
   */
  grid-template-areas: 'aside main' 'aside main';
  grid-template-columns: 150px auto;
}

[grid-name='[header (aside main)]'] {
    /**
   *   ----------------
   *   | header       |
   *   ----------------
   *   | aside | main |
   *   ----------------
   */
  grid-template-areas: 'header header' 'aside main';
  grid-template-rows: 60px auto;
  grid-template-columns: 150px auto;
}

[grid-name='[header (aside [main footer])]'] {
    /**
   *   ------------------
   *   | header         |
   *   ------------------
   *   |       | main   |
   *   | aside |--------|
   *   |       | footer |
   *   ------------------
   */
  grid-template-areas: 'header header' 'aside main' 'aside footer';
  grid-template-rows: 60px auto 60px;
  grid-template-columns: 150px auto;
}

[grid-name='(aside [header main])'] {
    /**
   *   ------------------
   *   |       | header |
   *   | aside |--------|
   *   |       | main   |
   *   ------------------
   */
  grid-template-areas: 'aside header' 'aside main';
  grid-template-rows: 60px auto;
  grid-template-columns: 150px auto;
}

[grid-name='(aside [header main footer])'] {
    /**
   *   ------------------
   *   |       | header |
   *   |       |--------|
   *   | asdie | main   |
   *   |       |--------|
   *   |       | footer |
   *   ------------------
   */
  grid-template-areas: 'aside header' 'aside main' 'aside footer';
  grid-template-rows: 60px auto 60px;
  grid-template-columns: 150px auto;
}

[grid-name='[header (aside main) footer]'] {
    /**
   *   ----------------
   *   | header       |
   *   |--------------|
   *   | asdie | main |
   *   |--------------|
   *   | footer       |
   *   ----------------
   */
  grid-template-areas: 'header header' 'aside main' 'footer footer';
  grid-template-rows: 60px auto 60px;
  grid-template-columns: 150px auto;
}

[grid-name='[(aside [header main]) footer]'] {
    /**
   *   ------------------
   *   |       | header |
   *   | asdie |--------|
   *   |       | main   |
   *   |----------------|
   *   | footer         |
   *   ------------------
   */
  grid-template-areas: 'aside header' 'aside main' 'footer footer';
  grid-template-rows: 60px auto 60px;
  grid-template-columns: 150px auto;
}

[grid-name='[(asdie main) footer]'] {
    /*
   *   ----------------
   *   | asdie | main |
   *   |--------------|
   *   | footer       |
   *   ----------------
   */
  grid-template-areas: 'aside main' 'aside main' 'footer footer';
  grid-template-rows: auto auto 60px;
  grid-template-columns: 150px auto;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid] > [grid-box--col-param] {
  -webkit-align-self: param;
  -ms-flex-item-align: param;
  align-self: param;
}

[grid] > [grid-box--row-param] {
  justify-self: param;
}

[grid~='col--parma'] {
  -webkit-box-align: param;
  -webkit-align-items: param;
  -ms-flex-align: param;
  align-items: param;
}

[grid~='row--parma'] {
  justify-items: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

[grid~='col::param'] {
  -webkit-box-pack: param;
  -webkit-justify-content: param;
  -ms-flex-pack: param;
  justify-content: param;
}

[grid~='row::param'] {
  -webkit-align-content: param;
  -ms-flex-line-pack: param;
  align-content: param;
}

/*# sourceMappingURL=grid-scss.css.map */