grid
990像素定宽25栅格布局。
使用说明
.ui-grid-row
表示一行,用于包裹.ui-grid-{{number}}
。一行内的栅格数不要超过 25。
.ui-grid-{{number}}
表示区域跨越了多少列。数字从 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>