990像素定宽25栅格布局。
表示一行，用于包裹.ui-grid-{{number}}。一行内的栅格数不要超过 25。
表示区域跨越了多少列。数字从 1 到 25，例如ui-grid-18。
<div class="ui-grid-row">
<div class="ui-grid-5">ui-grid-5</div>
<div class="ui-grid-15">ui-grid-15</div>
<div class="ui-grid-5">ui-grid-5</div>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="src/grid.css">
<style>
.wrapper {
width: 990px;
margin: 30px auto 0;
}
.ui-grid-row div {
background: #5DBB73;
box-shadow: 0 1px 0 #4FAA65 inset, 0 -1px 0 #4FAA65 inset, 1px 0 0 #4FAA65 inset, -1px 0 0 #4FAA65 inset;
transition-duration: 0.3s;
text-align: center;
padding: 3px 0;
}
.ui-grid-row div:hover {
background: #72DD8D;
}
</style>
<div class="wrapper">
<div class="ui-grid-row">
<div class="ui-grid-25">ui-grid-25</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-5">ui-grid-5</div>
<div class="ui-grid-20">ui-grid-20</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-5">ui-grid-5</div>
<div class="ui-grid-15">ui-grid-15</div>
<div class="ui-grid-5">ui-grid-5</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-21">ui-grid-21</div>
<div class="ui-grid-4">ui-grid-4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-6">ui-grid-6</div>
<div class="ui-grid-13">ui-grid-13</div>
<div class="ui-grid-6">ui-grid-6</div>
</div>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="src/grid.css">
<style>
.content {
margin: 0 auto;
width: 990px;
}
.ui-grid-5,
.ui-grid-20 {
height: 400px;
background: #eee;
line-height: 400px;
text-align: center;
}
</style>
<div class="content">
<div class="ui-grid-row">
<div class="ui-grid-5">190px</div>
<div class="ui-grid-20">790px</div>
</div>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="src/grid.css">
<style>
.content {
margin: 0 auto;
width: 990px;
}
.ui-grid-5,
.ui-grid-15 {
height: 400px;
background: #eee;
line-height: 400px;
text-align: center;
}
</style>
<div class="content">
<div class="ui-grid-row">
<div class="ui-grid-5">190px</div>
<div class="ui-grid-15">590px</div>
<div class="ui-grid-5">190px</div>
</div>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="src/grid.css">
<style>
.content {
margin: 0 auto;
width: 990px;
}
.ui-grid-5,
.ui-grid-15 {
height: 400px;
background: #eee;
line-height: 400px;
text-align: center;
}
.ui-grid-25 {
height: 120px;
background: #eee;
line-height: 120px;
text-align: center;
}
</style>
<div class="content">
<div class="ui-grid-row">
<div class="ui-grid-25">990px</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-5">190px</div>
<div class="ui-grid-15">590px</div>
<div class="ui-grid-5">190px</div>
</div>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="src/grid.css">
<style>
.content {
margin: 0 auto;
width: 990px;
}
.ui-grid-5,
.ui-grid-15 {
height: 400px;
background: #eee;
line-height: 400px;
text-align: center;
}
.ui-grid-25 {
height: 120px;
background: #eee;
line-height: 120px;
text-align: center;
}
</style>
<div class="content">
<div class="ui-grid-row">
<div class="ui-grid-25">990px</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-5">190px</div>
<div class="ui-grid-15">590px</div>
<div class="ui-grid-5">190px</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-25">990px</div>
</div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent