Card Layout এবং Gallery Layout তৈরি

Flexbox ব্যবহার করে আপনি সহজে Card Layout এবং Gallery Layout তৈরি করতে পারেন। Flexbox-এ যেহেতু উপাদানগুলোর বিন্যাস এবং স্থান ব্যবস্থাপনা সহজে নিয়ন্ত্রণ করা যায়, তাই এটি এসব লেআউট ডিজাইনে খুবই কার্যকর।

Card Layout তৈরি (Flexbox)

Card Layout এমন একটি ডিজাইন যেখানে প্রতিটি আইটেম (কার্ড) কিছু তথ্য বা চিত্র প্রদর্শন করে। Flexbox ব্যবহার করে আপনি সহজেই একাধিক কার্ডকে একসাথে সজ্জিত করতে পারেন, এবং প্রয়োজনে রেস্পন্সিভ ডিজাইনও তৈরি করতে পারবেন।

HTML:

<div class="card-container">
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 1</h3>
    <p>This is a description of Card 1.</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 2</h3>
    <p>This is a description of Card 2.</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 3</h3>
    <p>This is a description of Card 3.</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 4</h3>
    <p>This is a description of Card 4.</p>
  </div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;         /* একাধিক লাইনে সজ্জিত হবে */
  justify-content: space-around; /* সমান জায়গায় বিতরণ হবে */
  gap: 20px;              /* কার্ডগুলোর মধ্যে ফাঁকা জায়গা */
}

.card {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 250px;           /* প্রতি কার্ডের প্রস্থ */
  padding: 15px;
  text-align: center;
}

.card img {
  width: 100%;           /* চিত্রের প্রস্থ */
  border-radius: 8px;
}

.card h3 {
  margin-top: 10px;
}

.card p {
  margin-top: 5px;
}

ব্যাখ্যা:

• flex-wrap: wrap;: Flex Items (কার্ড) একাধিক লাইনে সজ্জিত হবে।
• justify-content: space-around;: কার্ডগুলোর মধ্যে সমান জায়গা থাকবে।
• gap: আইটেমগুলোর মধ্যে ফাঁকা জায়গা যোগ করে।

Gallery Layout তৈরি (Flexbox)

Gallery Layout সাধারণত চিত্র বা ছবি প্রদর্শনের জন্য ব্যবহৃত হয়। Flexbox ব্যবহার করে আপনি সহজেই একটি গ্যালারি ডিজাইন করতে পারেন, যেখানে চিত্রগুলো উপযুক্ত স্থান এবং আকারে সজ্জিত হবে।

HTML:

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 1">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 2">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 3">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 4">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 5">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 6">
  </div>
</div>

CSS:

.gallery {
  display: flex;
  flex-wrap: wrap;        /* একাধিক লাইনে ছবি সজ্জিত হবে */
  justify-content: space-between; /* ছবি গুলো সমান জায়গায় বিতরণ হবে */
  gap: 20px;             /* ছবির মধ্যে ফাঁকা জায়গা */
}

.gallery-item {
  flex: 1 1 30%;          /* প্রতিটি ছবির জন্য 30% জায়গা বরাদ্দ হবে */
  max-width: 300px;       /* ছবি সাইজ সীমিত হবে */
}

.gallery-item img {
  width: 100%;
  height: auto;           /* চিত্রের প্রস্থ অনুযায়ী উচ্চতা নিয়ন্ত্রণ হবে */
  border-radius: 8px;
}

ব্যাখ্যা:

• flex-wrap: wrap;: গ্যালারির আইটেমগুলি একাধিক লাইনে বিভক্ত হবে।
• justify-content: space-between;: ছবিগুলোর মধ্যে সমান দূরত্ব থাকবে।
• flex: 1 1 30%;: প্রতিটি ছবি এক লাইনে 30% জায়গা নেবে, কিন্তু বড় স্ক্রীনে তাদের আকার পরিবর্তিত হবে।
• gap: ছবিগুলোর মধ্যে জায়গা রাখবে।

রেস্পন্সিভ ডিজাইন (Card Layout এবং Gallery Layout)

Flexbox ব্যবহার করে সহজেই রেস্পন্সিভ ডিজাইন তৈরি করা যায়। এক্সাম্পল হিসেবে, আপনি ছোট স্ক্রীনে একে একে আইটেমগুলো প্রদর্শন করতে পারেন এবং বড় স্ক্রীনে তাদেরকে একাধিক কলামে সজ্জিত করতে পারেন।

Responsive Card Layout CSS:

@media (max-width: 768px) {
  .card-container {
    justify-content: center;
  }
  .card {
    width: 100%;  /* মোবাইল স্ক্রীনে প্রতিটি কার্ড পুরো প্রস্থ নিবে */
  }
}

Responsive Gallery Layout CSS:

@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 100%;  /* মোবাইল স্ক্রীনে প্রতিটি ছবি পুরো প্রস্থ নিবে */
  }
}

সারাংশ

• Card Layout এবং Gallery Layout Flexbox ব্যবহার করে সহজেই ডিজাইন করা যায়, যেখানে Flexbox এর flex-wrap, justify-content, এবং gap প্রপার্টি গুলি গুরুত্বপূর্ণ ভূমিকা পালন করে।
• Flexbox এর মাধ্যমে লেআউট সিস্টেমে অনেক নমনীয়তা পাওয়া যায় এবং এটি রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।
• আপনি flex-wrap প্রপার্টি ব্যবহার করে আইটেমগুলোকে একাধিক লাইনে সজ্জিত করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজে উপাদানগুলোর স্থান সামঞ্জস্য করতে সাহায্য করে।