布局框架
移动优先的12列响应式CSS网格系统
PetitQ
simple-grid.css 是一款移动优先的 12 列响应式 CSS 网格系统。它是轻量级的，压缩后的文件只有 2kb，响应式速度快，并且使用非常简单。
使用方法
使该网格系统需要在页面中引入 simple-grid.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="dist/simple-grid.css">
HTML 结构
该网格系统的 HTML 结构和 Bootstrap 网格系统的 HTML 结构基本一样：使用一个.container 元素作为容器，里面放置一个 div.row 元素，在行中可以设置各种大小的网格。
<div class="container">
<div class="row">
<div class="col-3">
<!-- 网格占一行的3列 -->
</div>
<div class="col-3">
<!-- 网格占一行的3列 -->
</div>
<div class="col-6">
<!-- 网格占一行的6列 -->
</div>
</div>
</div>
CSS 样式
整个网格容器.container 的宽度为 960 像素，你可以在自己的样式中覆盖这个设置，其它的不需要修改任何东西。.col-1 代表一列，如果你需要 8 列，可以为元素添加 class .col-8。该网格系统是移动优先的配置，所以在小屏幕设备上每一列都会占据屏幕的一行。如果你不希望在小屏幕设备中每一列都占据一行，可以为列 class 添加-sm 后缀，例如，两个.col-6-sm 的网格会使两列在小屏幕中同一行中并排排列。
Github 地址：https://github.com/zachacole/Simple-Grid
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
