UNPKG

grid-scss

Version:

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

1 lines 4.1 kB
*{margin:0;padding:0;-webkit-tap-highlight-color:transparent;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}body{font-size:14px;font-family:-apple-system,Helvetica,Microsoft YaHei,Arial,sans-serif;line-height:1.5;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[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]"]{grid-template-areas:"header" "main";grid-template-rows:60px auto}[grid-name="[main footer]"]{grid-template-areas:"main" "footer";grid-template-rows:auto 60px}[grid-name="[header main footer]"]{grid-template-areas:"header" "main" "footer";grid-template-rows:60px auto 60px}[grid-name="(aside main)"]{grid-template-areas:"aside main" "aside main";grid-template-columns:150px auto}[grid-name="[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])]"]{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])"]{grid-template-areas:"aside header" "aside main";grid-template-rows:60px auto;grid-template-columns:150px auto}[grid-name="(aside [header 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]"]{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]"]{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]"]{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~="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}