Skip to content

Instantly share code, notes, and snippets.

@gindis

gindis/grids.html

Last active October 10, 2015 09:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gindis/25a850985e124e177d8d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gindis/25a850985e124e177d8d to your computer and use it in GitHub Desktop.
Download ZIP
栅格
Raw
grids.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grids</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.grid-1200 {
margin: 0 auto;
padding: 0 0 0 2%;
}
.grid-1200 {
max-width: 1200px;
}
.row {
clear: both;
overflow: hidden;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {
float: left;
margin: 0 2% 0 0;
}
.col1 {
width: 8%;
}
.col2 {
width: 18%;
}
.col3 {
width: 28%;
}
.col4 {
width: 38%;
}
.col5 {
width: 48%;
}
.col6 {
width: 58%;
}
.col7 {
width: 68%;
}
.col8 {
width: 78%;
}
.col9 {
width: 88%;
}
.col10 {
width: 98%;
}
/*.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img {
width: 100%;
height: auto;
display: block
}*/
@media all and (min-width: 1024px) {
.row {
padding: 0
}
}
@media all and (max-width: 768px) {
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10 {
float: none;
width: 98%
}
}
@media all and (max-width: 768px) {
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10 {
}
}
@media all and (max-width: 480px) {
header h1 {
font-size: 59px;
margin: 60px 0 0 0;
line-height: 60px
}
header h2 {
font-size: 20px;
margin: 10px 0 60px;
line-height: 22px
}
}
@media all and (max-width: 320px) {
header h1 {
font-size: 40px;
margin: 40px 0 0 0
}
header h2 {
font-size: 18px;
margin: 0 0 45px
}
.code pre code {
white-space: pre-wrap
}
}
@media all and (max-width: 240px) {
header h1 {
font-size: 35px;
margin: 30px 0 0 0
}
header h2 {
margin: 0 0 35px
}
}
/**/
.grid-1200 {
padding-top: 20px;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {
background-color: #f60;
color: #fff;
margin-bottom: 20px;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<div class="grid-1200">
<div class="row">
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
<div class="col1">col1</div>
</div>
<div class="row">
<div class="col2">col2</div>
<div class="col2">col2</div>
<div class="col2">col2</div>
<div class="col2">col2</div>
<div class="col2">col2</div>
</div>
<div class="row">
<div class="col3">col3</div>
<div class="col3">col3</div>
<div class="col3">col3</div>
<div class="col3">col3</div>
</div>
<div class="row">
<div class="col4">col4</div>
<div class="col4">col4</div>
<div class="col4">col4</div>
</div>
<div class="row">
<div class="col5">col5</div>
<div class="col5">col5</div>
</div>
<div class="row">
<div class="col1">col1</div>
<div class="col9">col9</div>
</div>
<div class="row">
<div class="col2">col2</div>
<div class="col8">col8</div>
</div>
<div class="row">
<div class="col3">col3</div>
<div class="col7">col7</div>
</div>
<div class="row">
<div class="col4">col4</div>
<div class="col6">col6</div>
</div>
<div class="row">
<div class="col5">col5</div>
<div class="col5">col5</div>
</div>
<div class="row">
<div class="col6">col6</div>
<div class="col4">col4</div>
</div>
<div class="row">
<div class="col7">col7</div>
<div class="col3">col3</div>
</div>
<div class="row">
<div class="col8">col8</div>
<div class="col2">col2</div>
</div>
<div class="row">
<div class="col9">col9</div>
<div class="col1">col1</div>
</div>
<div class="row">
<div class="col10">col10</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment