Simple Grid 布局
谢奇略
Simple-Grid
html 代码
<!doctype html>
<html>
<head>
<title>Simple Grid</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://thisisdallas.github.io/Simple-Grid/simpleGrid.css" />
<style>
.content {
background: #ccc;
padding: 10px;
}
</style>
</head>
<body>
<!-- Grid 2/3 and 1/3-->
<div class="grid grid-pad">
<div class="col-1-1">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/2 -->
<div class="grid grid-pad">
<div class="col-1-2 mobile-col-1-2">
<div class="content">
</div>
</div>
<div class="col-1-2 mobile-col-1-2">
<div class="content">
</div>
</div>
<div class="col-1-2 mobile-col-1-1">
<div class="content">
</div>
</div>
<div class="col-1-2 mobile-col-1-2 hide-on-mobile">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/3 -->
<div class="grid grid-pad">
<div class="col-1-3 mobile-col-1-3">
<div class="content">
</div>
</div>
<div class="col-1-3 mobile-col-1-3">
<div class="content">
</div>
</div>
<div class="col-1-3 mobile-col-1-3">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/3 -->
<div class="grid grid-pad">
<div class="col-1-3 mobile-col-1-3 push-1-3">
<div class="content">
</div>
</div>
<div class="col-1-3 mobile-col-1-3 push-1-3">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/4 -->
<div class="grid grid-pad">
<div class="col-1-4">
<div class="content">
</div>
</div>
<div class="col-1-4">
<div class="content">
</div>
</div>
<div class="col-1-4 hide-on-mobile">
<div class="content">
</div>
</div>
<div class="col-1-4 hide-on-mobile">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/5 -->
<div class="grid grid-pad">
<div class="col-1-5">
<div class="content">
</div>
</div>
<div class="col-1-5">
<div class="content">
</div>
</div>
<div class="col-1-5">
<div class="content">
</div>
</div>
<div class="col-1-5">
<div class="content">
</div>
</div>
<div class="col-1-5">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/6 -->
<div class="grid grid-pad">
<div class="col-1-6">
<div class="content">
</div>
</div>
<div class="col-1-6">
<div class="content">
</div>
</div>
<div class="col-1-6">
<div class="content">
</div>
</div>
<div class="col-1-6">
<div class="content">
</div>
</div>
<div class="col-1-6">
<div class="content">
</div>
</div>
<div class="col-1-6">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/7 -->
<div class="grid grid-pad">
<div class="col-1-7">
<div class="content">
</div>
</div>
<div class="col-1-7">
<div class="content">
</div>
</div>
<div class="col-1-7">
<div class="content">
</div>
</div>
<div class="col-1-7">
<div class="content">
</div>
</div>
<div class="col-1-7">
<div class="content">
</div>
</div>
<div class="col-1-7">
<div class="content">
</div>
</div>
<div class="col-1-7">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/8 -->
<div class="grid grid-pad">
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
<div class="col-1-8">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/9 -->
<div class="grid grid-pad">
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
<div class="col-1-9">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/10 -->
<div class="grid grid-pad">
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
<div class="col-1-10">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/11 -->
<div class="grid grid-pad">
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
<div class="col-1-11">
<div class="content">
</div>
</div>
</div>
<!-- Grid 1/12 -->
<div class="grid grid-pad">
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
</div>
<!-- 11/12 and 1/12 layout -->
<div class="grid grid-pad">
<div class="col-1-12">
<div class="content">
</div>
</div>
<div class="col-11-12">
<div class="content">
</div>
</div>
</div>
<!-- 10/12 and 2/12 layout -->
<div class="grid grid-pad">
<div class="col-2-12">
<div class="content">
</div>
</div>
<div class="col-10-12">
<div class="content">
</div>
</div>
</div>
<!-- 9/12 and 3/12 layout -->
<div class="grid grid-pad">
<div class="col-3-12">
<div class="content">
</div>
</div>
<div class="col-9-12">
<div class="content">
</div>
</div>
</div>
<!-- 8/12 and 4/12 layout -->
<div class="grid grid-pad">
<div class="col-4-12">
<div class="content">
</div>
</div>
<div class="col-8-12">
<div class="content">
</div>
</div>
</div>
<!-- 7/12 and 5/12 layout -->
<div class="grid grid-pad">
<div class="col-5-12">
<div class="content">
</div>
</div>
<div class="col-7-12">
<div class="content">
</div>
</div>
</div>
<!-- 6/12 and 6/12 layout -->
<div class="grid grid-pad">
<div class="col-6-12">
<div class="content">
</div>
</div>
<div class="col-6-12">
<div class="content">
</div>
</div>
</div>
<!-- 7/12 and 5/12 layout -->
<div class="grid grid-pad">
<div class="col-7-12">
<div class="content">
</div>
</div>
<div class="col-5-12">
<div class="content">
</div>
</div>
</div>
<!-- 8/12 and 4/12 layout -->
<div class="grid grid-pad">
<div class="col-8-12">
<div class="content">
</div>
</div>
<div class="col-4-12">
<div class="content">
</div>
</div>
</div>
<!-- 9/12 and 3/12 layout -->
<div class="grid grid-pad">
<div class="col-9-12">
<div class="content">
</div>
</div>
<div class="col-3-12">
<div class="content">
</div>
</div>
</div>
<!-- 10/12 and 2/12 layout -->
<div class="grid grid-pad">
<div class="col-10-12">
<div class="content">
</div>
</div>
<div class="col-2-12">
<div class="content">
</div>
</div>
</div>
<!-- 11/12 and 1/12 layout -->
<div class="grid grid-pad">
<div class="col-11-12">
<div class="content">
</div>
</div>
<div class="col-1-12">
<div class="content">
</div>
</div>
</div>
</body>
</html>
类似资料：