首页 > 代码库 > UIkit-网格
UIkit-网格
UIkit网格最多可以分为10列
将可视区域宽度分为3列
<div class="uk-grid"> <div class="uk-width-1-3"></div> <div class="uk-width-1-3"></div> <div class="uk-width-1-3"></div></div>
响应式宽度
排水沟 .uk-grid-X
<div class="uk-grid uk-grid-large"> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div></div>
.uk-grid-large可以换成medium、small、collapse（无空隙）
网格的嵌套
<div class="uk-grid uk-grid-large"> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-grid"> <div class="uk-width-1-2"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-2"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> </div> </div> <div class="uk-width-1-3"> <div class="uk-grid"> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> <div class="uk-width-1-3"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>Lorem ipsum</code> </div> </div> </div> </div></div>
结果如图：
关键：每划分一次网格，加一层.uk-grid，在其中划分出.uk-width-X
有.uk-grid就必须有.uk-width-X，反之亦然
不要求必须填满一行
居中网格 .uk-container-center
<div class="uk-grid"> <div class="uk-width-1-3 uk-container-center"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <code>javascript(0)</code> </div> </div></div>
UIkit-网格
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。