UIkit通过网格、容器和响应式类快速构建页面。1. 使用uk-grid与uk-width-*创建响应式布局；2. 用uk-section、uk-card组织内容区块；3. 嵌套网格与uk-flex对齐提升精度；4. 利用uk-hidden、uk-visible实现设备适配，减少自定义CSS。
UIkit 是一个轻量、模块化的前端框架，适合快速构建响应式网页。它通过类名系统和组件组合实现灵活的布局结构，无需编写额外 CSS 即可搭建清晰的页面架构。
使用网格系统创建基本布局
UIkit 的 Grid 系统基于 flex 布局，通过 uk-grid 类创建行，用 uk-width-* 或 uk-child-width-* 控制列宽。
- uk-grid 容器内直接放置子元素，自动按比例分配空间
- 响应式宽度如 uk-width-1-2@m 表示在中等屏幕以上占一半宽度
- 使用 uk-child-width-1-3@s 统一设置子项在小屏及以上每行三列
示例：三栏布局在桌面平分，移动端堆叠
<div class="uk-grid" uk-grid> <div class="uk-width-1-3@s">左侧内容</div> <div class="uk-width-2-3@s">主内容区</div> </div>
利用容器与分块组件组织内容
UIkit 提供语义化容器类来划分区域，增强可读性和样式一致性。
立即学习“前端免费学习笔记（深入）”；
- uk-section 定义区块背景和间距，常用于页面大块分割
- uk-card 包裹独立内容模块，自带边框和阴影
- uk-article 标记文章主体，配合标题层级优化结构
结合网格与卡片实现图文列表：
<div class="uk-grid" uk-grid>
<div class="uk-width-1-2@s" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
<div class="uk-card uk-card-default">
<div class="uk-card-body">新闻条目</div>
</div>
</div>
</div>
嵌套与对齐控制提升布局精度
复杂界面需要嵌套网格和对齐类精细调整元素位置。
- 在列内再添加 uk-grid 实现二级布局
- 使用 uk-flex-top、uk-flex-middle 控制垂直对齐
- uk-margin 系列类管理外边距，避免手动写 spacing
例如侧边栏顶部对齐，主内容居中：
<div class="uk-grid uk-flex-middle" uk-grid> <div class="uk-width-1-4@s uk-flex-top">头像</div> <div class="uk-width-3-4@s">用户信息</div> </div>
响应式工具类隐藏或调整元素
根据设备显示不同内容是模块化的重要部分。
- uk-hidden@m 隐藏中屏以上元素
- uk-visible@s 仅小屏显示特定按钮
- 配合 uk-first-column 处理首项特殊样式
移动端折叠导航，桌面显示完整菜单：
<nav class="uk-navbar"> <div class="uk-navbar-left uk-visible@s">桌面菜单</div> <div class="uk-navbar-right"><span class="uk-hidden@s">手机菜单图标</span></div> </nav>
基本上就这些。通过组合 UIkit 自带的布局类和组件，可以快速搭建结构清晰、响应式的页面，减少自定义样式依赖，维护更方便。
