grid-scss
Version:
Grid 网格布局神器，Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷,可以通过 bower 和 npm 下载
1 lines • 14.8 kB
Source Map (JSON)
{"version":3,"sources":["grid-scss.css"],"names":[],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"grid-scss.css","sourcesContent":["/*!\n * grid-scss - Grid 网格布局神器，Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷,可以通过 bower 和 npm 下载\n * \n * @version v1.0.10\n * \n * @author vxhly <pengchengou@gmail.com>\n * \n * @link https://github.com/vxhly/grid-scss#readme\n * @license MIT\n */\n@charset 'UTF-8';\n\n* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n vertical-align: baseline;\n outline: 0;\n -webkit-tap-highlight-color: transparent;\n}\n\nbody {\n font-family: -apple-system, Helvetica, 'Microsoft YaHei', Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: #666;\n background-color: #fff;\n -webkit-text-size-adjust: 100% !important;\n -moz-text-size-adjust: 100% !important;\n -ms-text-size-adjust: 100% !important;\n text-size-adjust: 100% !important;\n}\n\n[grid] {\n display: grid;\n}\n\n[grid] img {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n[grid~='row-1'] {\n grid-template-rows: repeat(1, 1fr);\n}\n\n[grid~='col-1'] {\n grid-template-columns: repeat(1, 1fr);\n}\n\n[grid~='row-2'] {\n grid-template-rows: repeat(2, 1fr);\n}\n\n[grid~='col-2'] {\n grid-template-columns: repeat(2, 1fr);\n}\n\n[grid~='row-3'] {\n grid-template-rows: repeat(3, 1fr);\n}\n\n[grid~='col-3'] {\n grid-template-columns: repeat(3, 1fr);\n}\n\n[grid~='row-4'] {\n grid-template-rows: repeat(4, 1fr);\n}\n\n[grid~='col-4'] {\n grid-template-columns: repeat(4, 1fr);\n}\n\n[grid~='row-5'] {\n grid-template-rows: repeat(5, 1fr);\n}\n\n[grid~='col-5'] {\n grid-template-columns: repeat(5, 1fr);\n}\n\n[grid~='row-6'] {\n grid-template-rows: repeat(6, 1fr);\n}\n\n[grid~='col-6'] {\n grid-template-columns: repeat(6, 1fr);\n}\n\n[grid~='row-7'] {\n grid-template-rows: repeat(7, 1fr);\n}\n\n[grid~='col-7'] {\n grid-template-columns: repeat(7, 1fr);\n}\n\n[grid~='row-8'] {\n grid-template-rows: repeat(8, 1fr);\n}\n\n[grid~='col-8'] {\n grid-template-columns: repeat(8, 1fr);\n}\n\n[grid~='row-9'] {\n grid-template-rows: repeat(9, 1fr);\n}\n\n[grid~='col-9'] {\n grid-template-columns: repeat(9, 1fr);\n}\n\n[grid~='row-10'] {\n grid-template-rows: repeat(10, 1fr);\n}\n\n[grid~='col-10'] {\n grid-template-columns: repeat(10, 1fr);\n}\n\n[grid~='row-11'] {\n grid-template-rows: repeat(11, 1fr);\n}\n\n[grid~='col-11'] {\n grid-template-columns: repeat(11, 1fr);\n}\n\n[grid~='row-12'] {\n grid-template-rows: repeat(12, 1fr);\n}\n\n[grid~='col-12'] {\n grid-template-columns: repeat(12, 1fr);\n}\n\n[grid~='flow:col'] {\n grid-auto-flow: column;\n}\n\n[grid~='flow:row'] {\n grid-auto-flow: row;\n}\n\n[grid-name] > [grid-header] {\n grid-area: header;\n}\n\n[grid-name] > [grid-main] {\n grid-area: main;\n}\n\n[grid-name] > [grid-aside] {\n grid-area: aside;\n}\n\n[grid-name] > [grid-footer] {\n grid-area: footer;\n}\n\n/*\n * 写法应该遵循从上至下，从左至右原则，\n * 从上至下使用 [] 将区域名字括起来，区域名字使用空格相隔\n * 从左至右使用 () 将区域名字括起来，区域名字使用空格相隔\n */\n[grid-name='[header main]'] {\n /**\n * ----------\n * | header |\n * ----------\n * | main |\n * ----------\n */\n grid-template-areas: 'header' 'main';\n grid-template-rows: 60px auto;\n}\n\n[grid-name='[main footer]'] {\n /**\n * ------------\n * | main |\n * ------------\n * | footer |\n* ------------\n */\n grid-template-areas: 'main' 'footer';\n grid-template-rows: auto 60px;\n}\n\n[grid-name='[header main footer]'] {\n /**\n * ----------\n * | header |\n * ----------\n * | main |\n * ----------\n * | footer |\n * ----------\n */\n grid-template-areas: 'header' 'main' 'footer';\n grid-template-rows: 60px auto 60px;\n}\n\n[grid-name='(aside main)'] {\n /**\n * ----------------\n * | aside | main |\n * ----------------\n */\n grid-template-areas: 'aside main' 'aside main';\n grid-template-columns: 150px auto;\n}\n\n[grid-name='[header (aside main)]'] {\n /**\n * ----------------\n * | header |\n * ----------------\n * | aside | main |\n * ----------------\n */\n grid-template-areas: 'header header' 'aside main';\n grid-template-rows: 60px auto;\n grid-template-columns: 150px auto;\n}\n\n[grid-name='[header (aside [main footer])]'] {\n /**\n * ------------------\n * | header |\n * ------------------\n * | | main |\n * | aside |--------|\n * | | footer |\n * ------------------\n */\n grid-template-areas: 'header header' 'aside main' 'aside footer';\n grid-template-rows: 60px auto 60px;\n grid-template-columns: 150px auto;\n}\n\n[grid-name='(aside [header main])'] {\n /**\n * ------------------\n * | | header |\n * | aside |--------|\n * | | main |\n * ------------------\n */\n grid-template-areas: 'aside header' 'aside main';\n grid-template-rows: 60px auto;\n grid-template-columns: 150px auto;\n}\n\n[grid-name='(aside [header main footer])'] {\n /**\n * ------------------\n * | | header |\n * | |--------|\n * | asdie | main |\n * | |--------|\n * | | footer |\n * ------------------\n */\n grid-template-areas: 'aside header' 'aside main' 'aside footer';\n grid-template-rows: 60px auto 60px;\n grid-template-columns: 150px auto;\n}\n\n[grid-name='[header (aside main) footer]'] {\n /**\n * ----------------\n * | header |\n * |--------------|\n * | asdie | main |\n * |--------------|\n * | footer |\n * ----------------\n */\n grid-template-areas: 'header header' 'aside main' 'footer footer';\n grid-template-rows: 60px auto 60px;\n grid-template-columns: 150px auto;\n}\n\n[grid-name='[(aside [header main]) footer]'] {\n /**\n * ------------------\n * | | header |\n * | asdie |--------|\n * | | main |\n * |----------------|\n * | footer |\n * ------------------\n */\n grid-template-areas: 'aside header' 'aside main' 'footer footer';\n grid-template-rows: 60px auto 60px;\n grid-template-columns: 150px auto;\n}\n\n[grid-name='[(asdie main) footer]'] {\n /*\n * ----------------\n * | asdie | main |\n * |--------------|\n * | footer |\n * ----------------\n */\n grid-template-areas: 'aside main' 'aside main' 'footer footer';\n grid-template-rows: auto auto 60px;\n grid-template-columns: 150px auto;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid] > [grid-box--col-param] {\n -webkit-align-self: param;\n -ms-flex-item-align: param;\n align-self: param;\n}\n\n[grid] > [grid-box--row-param] {\n justify-self: param;\n}\n\n[grid~='col--parma'] {\n -webkit-box-align: param;\n -webkit-align-items: param;\n -ms-flex-align: param;\n align-items: param;\n}\n\n[grid~='row--parma'] {\n justify-items: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n\n[grid~='col::param'] {\n -webkit-box-pack: param;\n -webkit-justify-content: param;\n -ms-flex-pack: param;\n justify-content: param;\n}\n\n[grid~='row::param'] {\n -webkit-align-content: param;\n -ms-flex-line-pack: param;\n align-content: param;\n}\n"]}