网格
UIKit中的网格系统遵循移动优先的方式并且最多可容纳10个网格列。它使用网格内预定义的类对每个单元格的列宽进行了定义。
向一个父元素添加 .uk-grid 类来创建网格容器。对子元素添加一个 .uk-width-* 类来限定单元格的宽度。网格支持1、2、3、4、5、6和10个单元划分。下面的列表为你提供了可以应用到单元的 uk-width-* 类的概述。
.uk-width-1-1 填满可见宽度的100％。
.uk-width-1-2 把网格等分为两半。
.uk-width-1-3 to .uk-width-2-3 将网格划分成三分之一。
.uk-width-1-4 to .uk-width-3-4 将网格划分成四分之一。
.uk-width-1-5 to .uk-width-4-5 将网格划分成五分之一。
.uk-width-1-6 to .uk-width-5-6 将网格划分成六分之一。
.uk-width-1-10 to .uk-width-9-10 将网格划分成十分之一。
每组单元建立了一种冗余，所以在实际应用时，.uk-width-5-10 类与 .uk-width-1-2 类的实际效果都是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>
<div class="uk-grid uk-text-center uk-margin-top">
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-1-3
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-1-3
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-1-3
</div>
</div>
</div>
<div class="uk-grid uk-text-center">
<div class="uk-width-1-2">
<div class="uk-panel uk-panel-box">
.uk-width-1-2
</div>
</div>
<div class="uk-width-1-2">
<div class="uk-panel uk-panel-box">
.uk-width-1-2
</div>
</div>
</div>
</body>
</html>
uk-text-center
水平居中容器内部文本。
uk-margin-top
给当前元素加上上外边距
uk-panel uk-panel-box
使得div变身成为面板容器（背景变色，有默认padding）
image
特色 响应式宽度
UIKit中提供了一些非常有用的响应式宽度的类。基本上它们的使用方法就像通常宽度的类一样，但是它们带有前缀，这样它们只在特定的断点来产生效果。这些类可以结合 效果组件 中的可见性类来使用。这对于调整不同尺寸设备的布局和内容是非常重要的。
.uk-width-* 对于任何宽度的设备，网格都保持列并排。
.uk-width-small-* 影响宽度在 480px 以上的设备。网格列将在较小的视口中堆叠。
.uk-width-medium-* 影响宽度在 768px 以上的设备。网格列将在较小的视口中堆叠。
.uk-width-large-* 影响宽度在 960px 以上的设备。网格列将在较小的视口中堆叠。
.uk-width-small-1-3 影响宽度在 480px 以上的设备，对宽度在 480px 以上的设备起作用，对宽度在 480px 以下的设备，自成一行，不再呈现为多列布局。即视口大于480px像素以上的时候，占屏幕三分之一；小于480px后，独占一行。
运行以下代码，缩小窗口，观察网格变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>
<div class="uk-grid uk-text-center uk-margin-top">
<div class="uk-width-large-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-large-1-3
</div>
</div>
<div class="uk-width-large-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-large-1-3
</div>
</div>
<div class="uk-width-large-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-large-1-3
</div>
</div>
</div>
<div class="uk-grid uk-text-center uk-margin-top">
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-3
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-3
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-3
</div>
</div>
</div>
<div class="uk-grid uk-text-center uk-margin-top">
<div class="uk-width-small-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-small-1-3
</div>
</div>
<div class="uk-width-small-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-small-1-3
</div>
</div>
<div class="uk-width-small-1-3">
<div class="uk-panel uk-panel-box">
.uk-width-small-1-3
</div>
</div>
</div>
</body>
</html>
再看以下示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>
<div class="uk-grid uk-text-center uk-margin-top">
<div class="uk-width-medium-1-4 uk-width-small-1-2">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-4 uk-width-small-1-2
</div>
</div>
<div class="uk-width-medium-1-4 uk-width-small-1-2">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-4 uk-width-small-1-2
</div>
</div>
<div class="uk-width-medium-1-4 uk-width-small-1-2">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-4 uk-width-small-1-2
</div>
</div>
<div class="uk-width-medium-1-4 uk-width-small-1-2">
<div class="uk-panel uk-panel-box">
.uk-width-medium-1-4 uk-width-small-1-2
</div>
</div>
</div>
</body>
</html>
全屏时，一行四列，当视口小于768px后，变为两行两列，继续缩小视口，当视口小于480px后，变为四行一列。
应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Title</title>
<link href="uikit-2.25.0/css/uikit.almost-flat.min.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>
<div class="uk-grid uk-margin-top">
<div class="uk-width-medium-2-3 uk-text-center ">
<div class="uk-panel uk-panel-box">
<div class="uk-article">
<h1 class="uk-article-title">文章标题-洛神赋</h1>
<p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>
<p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
<p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
</div>
<div class="uk-article">
<h1 class="uk-article-title">文章标题-洛神赋</h1>
<p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>
<p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
<p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
</div>
<div class="uk-article">
<h1 class="uk-article-title">文章标题-洛神赋</h1>
<p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>
<p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
<p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
</div>
<div class="uk-article">
<h1 class="uk-article-title">文章标题-洛神赋</h1>
<p class="uk-article-meta">由 曹植 撰写于 2012年12月12日 | 发表在 博客</p>
<p class="uk-article-lead">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
<p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋，其词曰：</p>
</div>
</div>
</div>
<div class="uk-width-medium-1-3">
<div class="uk-panel uk-panel-box">
<h3 class="uk-panel-title">网站开发</h3>
<ul class="uk-list uk-list-line">
<li><a href="#" target="_blank"> 二次开发</a></li>
<li><a href="#" target="_blank"> JAVA</a></li>
<li><a href="#" target="_blank"> PHP</a></li>
<li><a href="#" target="_blank"> .NET</a></li>
<li><a href="#" target="_blank"> 网络营销</a></li>
</ul>
</div>
<div class="uk-margin-top uk-panel uk-panel-box">
<h3 class="uk-panel-title">网站开发</h3>
<ul class="uk-list uk-list-line">
<li><a href="#" target="_blank"> 二次开发</a></li>
<li><a href="#" target="_blank"> JAVA</a></li>
<li><a href="#" target="_blank"> PHP</a></li>
<li><a href="#" target="_blank"> .NET</a></li>
<li><a href="#" target="_blank"> 网络营销</a></li>
</ul>
</div>
<div class="uk-margin-top uk-panel uk-panel-box">
<h3 class="uk-panel-title">网站开发</h3>
<ul class="uk-list uk-list-line">
<li><a href="#" target="_blank"> 二次开发</a></li>
<li><a href="#" target="_blank"> JAVA</a></li>
<li><a href="#" target="_blank"> PHP</a></li>
<li><a href="#" target="_blank"> .NET</a></li>
<li><a href="#" target="_blank"> 网络营销</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
