enesdmc

TechnologiesComponentsAIBlogEnglishGame

Web tasarım dünyasında, kullanıcı deneyimini iyileştirmek ve estetik açıdan çekici düzenler oluşturmak için birçok farklı teknik kullanılır. Bu tekniklerden biri de bento grid tasarımıdır. Japon bento kutularından ilham alan bu düzen, web sayfalarında içeriklerin düzenli ve dengeli bir şekilde sunulmasını sağlar.

Bu yazıda, bento grid tasarımının ne olduğunu, neden kullanıldığını ve web projelerinizde nasıl uygulanabileceğini inceleyeceğiz.

Bento Grid Nedir?

Bento grid, adını Japon bento kutularından alır. Bu kutular, farklı yiyecekleri küçük bölmelere ayırarak düzenler ve bu düzenli sunum, dengeli bir öğün sunmanın yanı sıra estetik bir görünüm de sağlar. Aynı prensip, web tasarımında da geçerlidir. Bento grid, web sayfasındaki içerikleri farklı bölmelere ayırarak kullanıcıya sunar, böylece düzenli ve kolay anlaşılır bir yapı oluşturur.

Bento Grid Kullanmanın Avantajları

• Gelişmiş Organizasyon ve Tutarlılık: İçerikler düzenli bir şekilde sunulur, bu da kullanıcıların aradıkları bilgileri kolayca bulmalarını sağlar.
• Estetik Görünüm: Simetri ve temiz çizgiler, web sitenizin profesyonel ve düzenli görünmesini sağlar.
• Azaltılmış Kaydırma Yorgunluğu: Bento grid düzeni, önemli miktarda içeriği tek bir görüntüleme alanında sunarak kullanıcıların fazla kaydırma yapmasını engeller.
• Gelişmiş Gezinme: Kullanıcılar, bölümlere ayrılmış düzen sayesinde içerikler arasında kolayca geçiş yapabilirler.
• Duyarlı Tasarımla Uyumluluk: Bento grid, farklı ekran boyutlarına ve cihazlara uyum sağlayacak şekilde tasarlanabilir.

Bento Grid Nasıl Uygulanır?

Bento grid tasarımını uygulamak için CSS Grid ve Flexbox gibi modern CSS tekniklerini kullanabilirsiniz. Aşağıda basit bir örnekle bunu nasıl yapabileceğinizi göstereceğim.

JSX kodu:

import React from 'react'
 
const BentoGrid = () => {
  return (
    <div className="bentoGrid">
      <div className="item">a</div>
      <div className="item">b</div>
      <div className="item">c</div>
      <div className="item">d</div>
      <div className="item">e</div>
    </div>
  )
}
 
export default BentoGrid

Css kodu:

.bentoGrid {
  background-color: rgb(255 255 255 / 0.05);
  padding: 16px;
  border-radius: 8px;
  width: 100%;
  height: 400px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "a a a a b b"
    "a a a a b b"
    "a a a a b b"
    "c c d d e e";
}
 
.item {
  border: 2px solid #464545;
  border-radius: 8px;
  padding: 8px;
}
 
.bentoGrid .item:nth-child(1) {
  grid-area: a;
}
.bentoGrid .item:nth-child(2) {
  grid-area: b;
}
.bentoGrid .item:nth-child(3) {
  grid-area: c;
}
.bentoGrid .item:nth-child(4) {
  grid-area: d;
}
.bentoGrid .item:nth-child(5) {
  grid-area: e;
}
 
@media screen and (max-width: 1000px) {
  .bentoGrid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "a a a a"
      "a a a a"
      "b b b c"
      "d d e e";
  }
}
 
@media screen and (max-width: 750px) {
  .bentoGrid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "a a a"
      "a a a"
      "b b b"
      "c c c"
      "d d d"
      "e e e";
  }
}

Sonuç:

Bu kodlar, bento grid düzenini oluşturur. İçerikleri ilgili bölgelere yerleştirerek istediğiniz düzeni elde edebilirsiniz.

Bento Grid Website Örnekleri

Sonuç

Bento grid tasarımı, web projelerinde hem estetik hem de işlevsellik açısından büyük avantajlar sağlar. Düzenli ve kullanıcı dostu bir arayüz oluşturmak için bu yöntemi projelerinizde kullanabilirsiniz. Bu makalede verilen örnekleri kendi projelerinizde uygulayarak, bento grid tasarımının faydalarını görebilirsiniz. Bento grid düzeni sayesinde web siteniz daha profesyonel ve kullanıcı dostu bir hale gelecektir.

Okuduğunz için teşekkürler!...