CSS框架UIkit如何实现网格卡片布局_UIkit grid组件与card结合-css教程-PHP中文网

CSS框架UIkit如何实现网格卡片布局_UIkit grid组件与card结合

P粉602998670

发布： 2025-11-28 19:33:25

原创

841人浏览过

UIkit通过Grid与Card组件结合实现响应式卡片布局，支持多断点适配：小屏每行2列（uk-child-width-1-2@s）、中屏3列（uk-child-width-1-3@m）、大屏4列（uk-child-width-1-4@l），可使用uk-grid-collapse去除间隙、uk-flex-center居中对齐，配合uk-card-media-top和uk-img优化图文展示，并推荐使用uk-height-match确保等高布局。

css框架uikit如何实现网格卡片布局_uikit grid组件与card结合

UIkit 提供了灵活的 Grid 和 Card 组件，结合使用可以轻松实现响应式的网格卡片布局。这种布局常用于展示产品、文章或用户信息等场景，适配移动端和桌面端。

基本结构：Grid + Card 结合

UIkit 的 uk-grid 容器用于创建网格布局，每个子项可放置一个 uk-card 组件。通过添加响应式类，可以让卡片在不同屏幕尺寸下自动换行排列。

uk-child-width-1-2@s：小屏以上每行2列
uk-child-width-1-3@m：中屏以上每行3列
uk-child-width-1-4@l：大屏以上每行4列

示例代码：

立即学习“前端免费学习笔记（深入）”；

<div uk-grid class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l">
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">卡片 1</h3>
      <p>这里是卡片内容。</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">卡片 2</h3>
      <p>这里是卡片内容。</p>
    </div>
  </div>
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">卡片 3</h3>
      <p>这里是卡片内容。</p>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

登录后复制

去除默认边距与对齐优化

默认情况下，Grid 项目之间有间距。若希望卡片紧密排列，可使用 uk-grid-collapse 移除间隙，或用 uk-grid-small/uk-grid-medium 控制间距大小。

同时，使用 uk-flex-center 可水平居中卡片组：

Skybox AI

一键将涂鸦转为360°无缝环境贴图的AI神器

140

查看详情

<div class="uk-flex uk-flex-center">
  <div uk-grid class="uk-child-width-1-2@s uk-child-width-1-3@m" class="uk-grid-medium">
    <!-- 卡片项目 -->
  </div>
</div>

登录后复制

响应式卡片内容优化

为提升移动端体验，可结合 uk-card-body、uk-card-media-top 添加图片，并使用 UIkit 的懒加载或响应式文本工具。

例如带图标的卡片：

<div class="uk-card uk-card-default">
  <div class="uk-card-media-top">
    <img src="image.jpg" alt="卡片图片" uk-img>
  </div>
  <div class="uk-card-body">
    <h3 class="uk-card-title">标题</h3>
    <p>简短描述内容...</p>
    <a href="#" class="uk-button uk-button-text">查看详情</a>
  </div>
</div>

登录后复制