使用UIKit实现响应式网格依赖uk-grid类和响应式宽度类，支持12列布局、断点控制与自动分配。通过uk-width-*@s/m/l设置不同设备列宽，uk-child-width-简化等分布局，结合间距与对齐类快速构建自适应界面。
使用UIKit实现响应式网格非常简单，主要依赖其内置的网格系统和响应式类。UIKit 提供了灵活的列布局，能自动适应不同屏幕尺寸，无需额外编写 CSS。
理解 UIKit 网格结构
UIKit 的网格基于 uk-grid 类构建，容器使用 uk-grid，子元素作为列放入其中。默认将一行分为12列，支持嵌套和间距控制。
基本结构如下：
<div uk-grid><div class="uk-width-1-2">左半</div>
<div class="uk-width-1-2">右半</div>
</div>
设置响应式列宽
UIKit 支持通过添加前缀来为不同设备设置列宽：
立即学习“前端免费学习笔记（深入）”；
- 无前缀：适用于所有设备
- uk-width-small-：仅小屏（手机）
- uk-width-medium-：平板及以上
- uk-width-large-：桌面大屏
例如，希望在手机上堆叠，在平板以上并排：
<div uk-grid><div class="uk-width-1-1 uk-width-1-2@s uk-width-2-3@m">内容区</div>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">侧边栏</div>
</div>
说明：@s 表示 small breakpoint，@m 表示 medium。该设置让两列在小屏垂直排列，中等屏各占一半，大屏为主内容更宽。
使用简化语法与自动布局
若希望子元素均分宽度，可省略具体比例：
- uk-child-width-1-2：每列占一半
- uk-child-width-1-3：每列占三分之一
- uk-child-width-expand：自动扩展填满空间
示例：三列等宽响应式布局
<div uk-grid class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m"><div><p>卡片1</p></div>
<div><p>卡片2</p></div>
<div><p>卡片3</p></div>
</div>
这样在手机上每列独占一行，平板两列一行，桌面三列一行。
控制间距与对齐
UIKit 默认有 gutter 间距，可通过以下类调整：
- uk-grid-collapse：去除间距
- uk-grid-small：小间距
- uk-grid-large：大间距
也可使用 uk-flex-left、uk-flex-center 等控制主轴对齐。
基本上就这些。只要掌握 uk-grid 和响应式 width 类，就能快速搭建适配各种设备的布局。不复杂但容易忽略断点命名规则和嵌套方式。建议参考官方文档中的 Grid 组件示例进行调试。
