SnippetUI
← Back to snippets

便当盒网格布局

各种非高级、现代便利设施以及经常使用的前面板上的功能信息。

HTMLTailwind CSS

预览

NEW FEATURE

Create without limits

Our new AI-powered creation engine gives you the tools to build faster and smarter than ever before.

Lightning Fast

Optimized for speed. Experience sub-second load times.

Analytics

Track your progress with real-time insights.

Secure Environment

Enterprise-grade security built directly into the core of your application.

Avatar

Jane Doe

Lead Designer

用例和功能

Bento 网格布局是一种像拼图一样整齐地布置各种尺寸组件的设计模式。

  • 功能： 非常适合在着陆页上展示产品的多个视觉吸引力。
  • 仪表板： 组织和排列不同大小的小部件以确定信息的优先级。
  • **作品集：**帮助您以有吸引力的方式列出您的项目、技能、个人资料等。

独特之处在于，尽管每张卡片都有独立的含义，但整体上却给人一种统一感（就像便当盒一样），因此即使信息密度很高，用户也不会感到不知所措。

设计和用户体验要点

  1. 引导视线： 通过放置像2x2这样的大卡片，你可以强烈地将用户的注意力吸引到你想要传达的主要信息上。
  2. 悬停效果： 通过结合小比例放大、阴影变化和内部元素动画，为每张卡片赋予现代、互动的感觉。
  3. 圆角（Radius）： 通过设置较大的圆角（如rounded-[2rem]），可以强调柔软、友好的便当感觉。
  4. 响应式设计： 旨在回退到移动设备（智能手机）上的单列，并在平板电脑及以上设备上更改为复杂的网格配置。

如何定制

  • 更改网格大小： 您可以通过更改父容器的md:grid-cols-4和md:grid-rows-3以及调整子元素的col-span和row-span来创建自由布局。
  • 颜色和渐变： 更改每张卡片的背景颜色（例如bg-gradient-to-br from-indigo-500 to-purple-600）以匹配您的品牌颜色。
  • 兼容深色模式： 使用 dark:bg-slate-800 和 dark:text-white 优化深色模式下的可见性。可以对其进行调整以适合您的项目主题。

实现代码

<div class="grid grid-cols-1 sm:grid-cols-4 grid-rows-none sm:grid-rows-3 gap-4 sm:gap-6 p-4 max-w-5xl mx-auto h-auto w-full grid-flow-row-dense">
<!-- Large Hero Card (2x2) -->
<div class="col-span-1 sm:col-span-2 row-span-1 sm:row-span-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-[2rem] p-8 text-white shadow-lg shadow-indigo-200/50 dark:shadow-none flex flex-col justify-between overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <div class="relative z-10">
    <span class="inline-block py-1 px-3 rounded-full bg-white/20 backdrop-blur-md text-xs font-semibold tracking-wider mb-4 border border-white/10 text-white">NEW FEATURE</span>
    <h3 class="text-3xl sm:text-4xl font-bold mb-3 leading-tight">Create without limits</h3>
    <p class="text-indigo-100 text-base sm:text-lg max-w-md">Our new AI-powered creation engine gives you the tools to build faster and smarter than ever before.</p>
  </div>
  <div class="mt-8 relative z-10">
    <button class="bg-white text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700 transition-colors px-6 py-3 rounded-full font-semibold shadow-md flex items-center gap-2 w-fit">
      Get Started
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </button>
  </div>
  <!-- Decorative elements -->
  <div class="absolute top-0 right-0 -mr-8 -mt-8 w-64 h-64 bg-gradient-to-br from-purple-400/40 to-transparent rounded-full blur-3xl pointer-events-none"></div>
  <div class="absolute -bottom-16 -right-16 w-80 h-80 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all duration-700 pointer-events-none"></div>
</div>

<!-- Top Right Card (1x1) -->
<div class="col-span-1 bg-white dark:bg-slate-800/80 backdrop-blur-xl rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700/50 flex flex-col justify-between transition-all hover:shadow-md hover:-translate-y-1 duration-300">
  <div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-2xl flex items-center justify-center mb-4">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </div>
  <div>
    <h4 class="text-xl font-bold text-slate-800 dark:text-white mb-2">Lightning Fast</h4>
    <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Optimized for speed. Experience sub-second load times.</p>
  </div>
</div>

<!-- Tall Card (1x2) -->
<div class="col-span-1 sm:row-span-2 bg-gradient-to-b from-rose-400 to-orange-500 rounded-[2rem] p-6 shadow-lg shadow-rose-200/50 dark:shadow-none text-white flex flex-col justify-between overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <div class="relative z-10">
     <div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 border border-white/10">
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
     </div>
     <h4 class="text-xl font-bold mb-2">Analytics</h4>
     <p class="text-rose-100 text-sm">Track your progress with real-time insights.</p>
  </div>
  <div class="mt-8 h-32 w-full flex items-end gap-2 pt-4 relative z-10">
    <div class="w-full bg-white/20 rounded-t-lg h-[30%] group-hover:h-[40%] transition-all duration-500 ease-out"></div>
    <div class="w-full bg-white/30 rounded-t-lg h-[50%] group-hover:h-[70%] transition-all duration-500 ease-out delay-75"></div>
    <div class="w-full bg-white/50 rounded-t-lg h-[70%] group-hover:h-[90%] transition-all duration-500 ease-out delay-100"></div>
    <div class="w-full bg-white/80 rounded-t-lg h-[90%] group-hover:h-[100%] transition-all duration-500 ease-out delay-150"></div>
  </div>
  <!-- Decorative radial gradient -->
  <div class="absolute inset-0 bg-gradient-to-t from-orange-600/50 to-transparent pointer-events-none"></div>
</div>

<!-- Wide Card (4x1) -->
<div class="col-span-1 sm:col-span-4 bg-slate-900 rounded-[2rem] p-6 sm:p-8 shadow-xl text-white flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 overflow-hidden relative group transition-transform duration-300 hover:scale-[1.02]">
  <!-- Dot pattern background -->
  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMS41IiBjeT0iMS41IiByPSIxLjUiIGZpbGw9IiNmZmZmZmYwZCIvPjwvc3ZnPg==')] opacity-50 group-hover:opacity-70 transition-opacity duration-500"></div>
  
  <div class="relative z-10 flex-1">
    <div class="flex items-center gap-3 mb-2">
      <span class="flex h-3 w-3 relative">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
      </span>
      <h4 class="text-xl font-bold">Secure Environment</h4>
    </div>
    <p class="text-slate-400 text-sm max-w-sm">Enterprise-grade security built directly into the core of your application.</p>
  </div>
  <div class="relative z-10 w-16 h-16 bg-slate-800/80 backdrop-blur-md rounded-2xl border border-slate-700/50 flex items-center justify-center flex-shrink-0 group-hover:border-emerald-500/30 transition-colors duration-300">
    <svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
  </div>
  
  <!-- Glow effect -->
  <div class="absolute top-1/2 right-1/4 -translate-y-1/2 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>
</div>

<!-- Bottom Left Card (1x1) -->
<div class="col-span-1 bg-white dark:bg-slate-800/80 backdrop-blur-xl rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700/50 flex flex-col justify-center items-center text-center transition-all hover:shadow-md hover:-translate-y-1 duration-300 group cursor-pointer">
  <div class="relative w-16 h-16 mb-4">
    <div class="absolute inset-0 bg-gradient-to-tr from-pink-500 to-violet-500 rounded-full animate-spin-slow opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-sm"></div>
    <div class="absolute inset-0 bg-gradient-to-tr from-pink-500 to-violet-500 rounded-full p-[2px] group-hover:scale-105 transition-transform duration-300">
      <div class="w-full h-full bg-white dark:bg-slate-800 rounded-full p-1">
        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jane" alt="Avatar" class="w-full h-full rounded-full object-cover" />
      </div>
    </div>
    <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 border-2 border-white dark:border-slate-800 rounded-full z-10"></div>
  </div>
  <h4 class="text-lg font-bold text-slate-800 dark:text-white mb-0.5">Jane Doe</h4>
  <p class="text-slate-500 dark:text-slate-400 text-xs font-medium">Lead Designer</p>
</div>
</div>

浏览器兼容性状态

它使用 CSS Grid 和 Tailwind CSS，并受到现代浏览器的广泛支持。

  • Chrome：最新版本
  • 火狐浏览器：最新版本
  • Safari：最新版本
  • 边缘：最新版本
  • iOS Safari：最新版本
  • Android Chrome：最新版本