Bento Grid Düzeni

Önizleme

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.

Jane Doe

Lead Designer

Kullanım durumları ve özellikleri

Bento ızgara düzeni, çeşitli boyutlardaki bileşenleri bir bulmaca gibi düzgün bir şekilde yerleştiren bir tasarım desenidir.

Özellikler: Bir ürünün birden fazla özelliğinin açılış sayfasında görsel olarak çekici olması için idealdir.
Kontrol Paneli: Bilgilere öncelik vermek için farklı boyutlardaki widget’ları organize edin ve düzenleyin.
Portföy: Projelerinizi, becerilerinizi, profilinizi vb. çekici bir şekilde listelemenize yardımcı olur.

Benzersiz özelliği, her kartın bağımsız bir anlamı olmasına rağmen bir bütün olarak birlik duygusu vermesidir (bento kutusu gibi), böylece bilgi yoğunluğu yüksek olsa bile kullanıcı bunalmış hissetmez.

Tasarım ve kullanıcı deneyiminin önemli noktaları

Gözü yönlendirme: 2x2 gibi büyük kartlar yerleştirerek kullanıcının dikkatini vermek istediğiniz ana mesaja güçlü bir şekilde çekebilirsiniz.
Vurgu Efektleri: Küçük ölçek büyütmeler, gölge değişiklikleri ve dahili öğe animasyonları ekleyerek her karta modern, etkileşimli bir his verin.
Yuvarlatılmış köşeler (Yarıçap): Daha büyük yuvarlatılmış köşeler ayarlayarak (‘yuvarlak-[2rem]’ gibi), yumuşak ve dost canlısı Bento hissini vurgulayabilirsiniz.
Duyarlı Tasarım: Mobil cihazlarda (akıllı telefonlar) tek bir sütuna geri dönecek ve tabletlerde ve üzeri cihazlarda karmaşık bir ızgara yapılandırmasına geçecek şekilde tasarlandı.

Nasıl kişiselleştirilir

Izgara boyutunu değiştirin: Ana kapsayıcının sm:grid-cols-4 ve sm:grid-rows-3lerini değiştirerek ve alt öğelerin col-span ve row-spanlarını ayarlayarak ücretsiz bir düzen oluşturabilirsiniz.
Renkler ve Degradeler: Her kartın arka plan rengini markanızın renkleriyle eşleşecek şekilde değiştirin (ör. “bg-gradient-to-br from-indigo-500’den-purple-600’e”).
Karanlık mod uyumlu: “dark:bg-slate-800” ve “dark:text-white” kullanılarak karanlık modda optimize edilmiş görünürlük. Proje temanıza uyacak şekilde ayarlanabilir.

Uygulama kodu

<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>

Tarayıcı uyumluluk durumu

CSS Grid ve Tailwind CSS’yi kullanır ve modern tarayıcılar tarafından yaygın olarak desteklenir.

Chrome: en son sürüm
Firefox: en son sürüm
Safari: en son sürüm
Kenar: En son sürüm
iOS Safari: En son sürüm
Android Chrome: en son sürüm