九宫格

九宫格是移动端常见的一种布局,常见的有微信钱包。

九宫格布局最外层是一个样式类为 weui-grids,然后每一个宫格均为 weui-grid。当然,九宫格不一定非要是九个,多少个都行,建议至少三个。

  1. <!-- 九宫格 -->
  2. <div class="weui-grids">
  3. <!-- 第一个宫格 -->
  4. <a href="#" class="weui-grid">
  5. <!-- 图标 -->
  6. <div class="weui-grid__icon">
  7. <img src="" alt="">
  8. </div>
  9. <!-- 标签文字 -->
  10. <p class="weui-grid__label">标签文字</p>
  11. </a>
  12. <!-- 第二个宫格 -->
  13. <a href="#" class="weui-grid">
  14. <!-- 图标 -->
  15. <div class="weui-grid__icon">
  16. <img src="" alt="">
  17. </div>
  18. <!-- 标签文字 -->
  19. <p class="weui-grid__label">标签文字</p>
  20. </a>
  21. </div>

九宫格 - 图1