Flexbox এবং CSS Grid এর তুলনা

Flexbox এবং CSS Grid দুইটি শক্তিশালী লেআউট মডিউল, যা ওয়েব ডিজাইনে ব্যবহৃত হয়। যদিও উভয়েরই উদ্দেশ্য একই—ওয়েব পেজের উপাদানগুলোকে সঠিকভাবে সাজানো এবং লেআউট কাস্টমাইজ করা—তবে তাদের ব্যবহারের উপায় এবং ক্ষমতা আলাদা। নিচে Flexbox এবং CSS Grid-এর মধ্যে প্রধান পার্থক্য ও তুলনা করা হলো।

Flexbox:

1. এক-মাত্রিক লেআউট (One-dimensional layout):

Flexbox একটি এক-মাত্রিক লেআউট সিস্টেম, যার মাধ্যমে আপনি শুধুমাত্র এক দিক—অর্থাৎ অনুভূমিক (row) বা উল্লম্ব (column)—এ উপাদানগুলোকে সাজাতে পারবেন।

• ব্যবহার: এক লাইনে উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে সাজানোর জন্য।
• যেমন: ন্যাভিগেশন বার, বাটন গ্রুপ, ফর্ম ইত্যাদি।

2. উপাদান সাজানোর নিয়ন্ত্রণ:

Flexbox আপনাকে সহজে উপাদানগুলোর ক্রম, স্থান এবং বিন্যাস নিয়ন্ত্রণ করতে দেয়। এতে প্রপার্টি যেমন flex-direction, justify-content, align-items এবং align-self ব্যবহার করা হয়।

3. প্রধান বৈশিষ্ট্য:

• ডাইনামিক আকার: Flexbox উপাদানগুলোর আকার পরিবর্তন করতে সহায়ক।
• সমান স্থান বিতরণ: justify-content ব্যবহার করে Flex Items-এর মধ্যে সমান জায়গা বা নির্দিষ্ট দূরত্ব তৈরি করা যায়।
• নমনীয় লেআউট: যেকোনো আকারের স্ক্রীনে উপাদানগুলোর বিন্যাস সহজেই সামঞ্জস্য করা যায়।

4. উদাহরণ:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex: 1;
  padding: 10px;
}

CSS Grid:

1. দ্বি-মাত্রিক লেআউট (Two-dimensional layout):

CSS Grid একটি দ্বি-মাত্রিক লেআউট সিস্টেম, যার মাধ্যমে আপনি উপাদানগুলোকে দুটি অক্ষ—অর্থাৎ সারি (row) এবং কলাম (column)—এ বিন্যস্ত করতে পারেন।

• ব্যবহার: পুরো ওয়েবপেজ বা বড় লেআউট সিস্টেম ডিজাইন করার জন্য।
• যেমন: পেজ লেআউট, গ্রিড বেজড ডিজাইন ইত্যাদি।

2. উপাদান সাজানোর নিয়ন্ত্রণ:

CSS Grid-এর মাধ্যমে আপনি কলাম, সারি এবং তাদের পরিমাণ নিয়ন্ত্রণ করতে পারেন। এর জন্য grid-template-columns, grid-template-rows, grid-gap ইত্যাদি প্রপার্টি ব্যবহার করা হয়।

3. প্রধান বৈশিষ্ট্য:

• দ্বি-মাত্রিক লেআউট: CSS Grid উপাদানগুলোকে অনুভূমিক এবং উল্লম্ব দুই দিকেই সাজানোর ক্ষমতা প্রদান করে।
• গ্রিড সিস্টেম: সম্পূর্ণ পেজের জন্য গ্রিড লেআউট তৈরি করা সম্ভব।
• স্থিতিশীলতা: CSS Grid খুবই শক্তিশালী এবং জটিল লেআউট ডিজাইন করতে সক্ষম।

4. উদাহরণ:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
}

Flexbox এবং CSS Grid এর তুলনা:

কোন পরিস্থিতিতে কোনটি ব্যবহার করবেন?

• Flexbox:
  • ছোট, এক-মাত্রিক লেআউট যেমন বাটন গ্রুপ, ন্যাভিগেশন বার, অথবা ফর্ম এলিমেন্টের জন্য সবচেয়ে উপযুক্ত।
  • উপাদানগুলোর অবস্থান সহজে পরিবর্তন করতে Flexbox খুবই কার্যকরী।
• CSS Grid:
  • জটিল, দ্বি-মাত্রিক লেআউট যেমন ওয়েবপেজের পূর্ণ লেআউট ডিজাইন করার জন্য CSS Grid আদর্শ।
  • পেজের কলাম, সারি, এবং তাদের মধ্যে ফাঁকা স্থান নির্ধারণে CSS Grid অনেক বেশি নমনীয়।

সারাংশ

• Flexbox এক-মাত্রিক লেআউট ডিজাইন করার জন্য সবচেয়ে সহজ এবং দ্রুত উপায়। এটি ছোট স্ক্রীনে বা সহজ লেআউটের জন্য উপযুক্ত।
• CSS Grid দ্বি-মাত্রিক লেআউট ডিজাইন তৈরিতে ব্যবহার হয় এবং বড়, জটিল লেআউট তৈরি করতে শক্তিশালী উপায়।

উপযুক্ত লেআউট সিস্টেম নির্বাচন করা ডিজাইনের জটিলতা এবং প্রয়োজনের উপর নির্ভর করে।

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

১. লেআউট মডেল (Layout Model)

Flexbox:

• এক-মাত্রিক (One-dimensional): Flexbox শুধুমাত্র এক অক্ষে কাজ করে (অথবা অনুভূমিক, অথবা উল্লম্ব)। এটি উপাদানগুলোকে একটি সারি বা একটি কলামে সজ্জিত করে।
• ব্যবহার: একটিমাত্র সারি বা কলামের লেআউট তৈরি করার জন্য Flexbox ব্যবহার করা হয়। এটি এক্সেসিবিলিটি এবং স্পেস ব্যবস্থাপনায় নমনীয়তা প্রদান করে।

CSS Grid:

• দুই-মাত্রিক (Two-dimensional): CSS Grid দুটি অক্ষে কাজ করে (অর্থাৎ সারি এবং কলাম)। এটি উপাদানগুলোকে সঠিকভাবে সারি এবং কলাম উভয় দিক দিয়ে সজ্জিত করতে সক্ষম।
• ব্যবহার: CSS Grid পুরো পেজ বা সেকশন লেআউটের জন্য উপযুক্ত। এটি সারি এবং কলাম ভিত্তিক জটিল লেআউট ডিজাইন করতে সহায়ক।

২. ফ্লেক্সিবিলিটি (Flexibility)

Flexbox:

• বেশি নমনীয়: Flexbox স্বয়ংক্রিয়ভাবে আইটেমগুলোর আকার এবং স্থান সামঞ্জস্য করতে পারে। এটি উপাদানগুলোর মধ্যে স্থান সমানভাবে বিতরণ করতে সহায়তা করে।
• স্পেস ব্যবস্থাপনা: Flexbox একক অক্ষে কাজ করার কারণে এটি ছোট বা সরু লেআউটের জন্য উপযুক্ত।

CSS Grid:

• ফ্লেক্সিবিলিটি কম: CSS Grid আরো জটিল লেআউট তৈরি করতে সক্ষম, যেখানে পুরো পেজ বা সেকশন একাধিক সারি এবং কলামে বিভক্ত থাকে। তবে Flexbox তুলনায় এটি আরও কাঠিন্যপূর্ণ হতে পারে যখন সোজা লেআউট প্রয়োজন।
• স্পেস ব্যবস্থাপনা: CSS Grid মূলত বৃহত্তর লেআউট তৈরির জন্য ব্যবহৃত হয়, যেখানে একাধিক সারি এবং কলামের সঠিক নিয়ন্ত্রণ প্রয়োজন।

৩. ব্যবহার ও উদ্দেশ্য (Use Cases & Purpose)

Flexbox:

• একটি নির্দিষ্ট অক্ষে উপাদানগুলোর বিন্যাস: Flexbox উপাদানগুলোর বিন্যাস নিয়ন্ত্রণ করতে ব্যবহৃত হয় যখন উপাদানগুলো এক অক্ষে (row বা column) সজ্জিত করতে হয়। উদাহরণস্বরূপ, ন্যাভিগেশন বার, ফর্ম, বাটন গ্রুপ ইত্যাদির জন্য Flexbox ব্যবহৃত হয়।

CSS Grid:

• দুই অক্ষের লেআউট: CSS Grid ব্যবহার করা হয় যখন আপনি পেজের গঠন, যেমন পুরো ওয়েব পেজ বা ড্যাশবোর্ড ইত্যাদি, ডিজাইন করতে চান। এখানে আপনি সারি এবং কলামের জটিল লেআউট তৈরি করতে পারেন।

৪. স্ট্রাকচার এবং প্রপার্টি (Structure and Properties)

Flexbox:

• প্রপার্টি:
  • display: flex;
  • flex-direction
  • justify-content
  • align-items
  • align-self
• গঠন: Flexbox-এ প্রধানত একটি সারি বা কলাম ব্যবহৃত হয় এবং আইটেমগুলো একসাথে সমন্বিত থাকে।
• নমনীয়তা: Flexbox স্ট্রেচযোগ্য এবং উপাদানগুলোকে অটোমেটিক্যালি নতুন আকারে সজ্জিত করে, যখন প্রয়োজন।

CSS Grid:

• প্রপার্টি:
  • display: grid;
  • grid-template-rows
  • grid-template-columns
  • grid-gap
  • grid-column, grid-row
• গঠন: CSS Grid-এ সারি এবং কলামের সংজ্ঞা দেওয়া হয়। এটি লেআউটের মূল কনটেইনারে একটি গ্রিড তৈরি করে, যেখানে সারি এবং কলামের আকার নির্ধারণ করা যায়।
• নমনীয়তা: CSS Grid পুরো পেজ বা ডিভাইসের লেআউট তৈরিতে আরও বেশি কাঠিন্যপূর্ণ হতে পারে, কিন্তু এটি খুবই শক্তিশালী এবং ব্যাপকভাবে কাস্টমাইজেবল।

৫. রেস্পন্সিভ ডিজাইন (Responsive Design)

Flexbox:

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

CSS Grid:

• রেস্পন্সিভ ডিজাইন: CSS Grid দিয়েও রেস্পন্সিভ ডিজাইন তৈরি করা সম্ভব, তবে এটি কিছুটা জটিল এবং বিশেষ কেসে ব্যবহার করা হয়, যেমন পুরো পেজের লেআউট যখন ভিন্ন ভিন্ন স্ক্রীনে পরিবর্তন করতে হয়।

৬. কাজের উদাহরণ (Use Case Examples)

Flexbox উদাহরণ:

• একটি ন্যাভিগেশন বার, যেখানে আইটেমগুলো অনুভূমিকভাবে সাজানো থাকে।
• একটি বাটন গ্রুপ, যেখানে বাটনগুলো সমানভাবে বিতরণ করা হয়।

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  background-color: lightblue;
  padding: 10px;
}

CSS Grid উদাহরণ:

• একটি ওয়েবপেজ লেআউট, যেখানে হেডার, সাইডবার, কন্টেন্ট এবং ফুটার একাধিক সারি ও কলামে বিভক্ত থাকে।

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
}

Flexbox এবং CSS Grid এর মধ্যে তুলনা:

সারাংশ

• Flexbox ছোট উপাদান এবং একক লেআউটের জন্য উপযুক্ত, যেখানে এক অক্ষে উপাদানগুলোর বিন্যাস প্রয়োজন।
• CSS Grid বৃহত্তর এবং জটিল লেআউট তৈরি করার জন্য উপযুক্ত, যেখানে একাধিক সারি এবং কলামের নিয়ন্ত্রণ প্রয়োজন।

Flexbox এবং CSS Grid উভয়েরই নিজস্ব শক্তি আছে এবং তাদের ব্যবহারের ক্ষেত্র অনুযায়ী নির্বাচন করা উচিত।

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

Flexbox ব্যবহার করবেন যখন:

1. এক-মাত্রিক (One-Dimensional) লেআউট প্রয়োজন:

• Flexbox একটি এক-মাত্রিক লেআউট সিস্টেম, যার মানে এটি শুধুমাত্র অনুভূমিক (row) বা উল্লম্ব (column) একে অপরের সাথে উপাদানগুলোকে সজ্জিত করতে ব্যবহৃত হয়।
• যদি আপনার ডিজাইন একটি একক লাইনে (বা কলামে) উপাদান সাজাতে হয়, Flexbox ব্যবহার করুন।

উদাহরণ:

• ন্যাভিগেশন বার
• বাটন গ্রুপ
• রেস্পন্সিভ ফর্ম এলিমেন্টস

.flex-container {
  display: flex;
  justify-content: space-between;
}

2. আইটেমগুলোর মধ্যে স্থান সমানভাবে ভাগ করতে হবে:

• Flexbox-এ justify-content, align-items, এবং gap প্রপার্টির মাধ্যমে সহজেই উপাদানগুলোর মধ্যে স্থান নিয়ন্ত্রণ করা যায়।

উদাহরণ:

• সমান দূরত্বে বা সমান আকারে উপাদানগুলি সাজানো।

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. নমনীয় লেআউট প্রয়োজন:

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

উদাহরণ:

• মোবাইল এবং ডেস্কটপ স্ক্রীনের জন্য রেস্পন্সিভ ন্যাভিগেশন

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

4. আইটেমগুলোর ক্রম এবং আকার নিয়ন্ত্রণ করতে হবে:

• Flexbox ব্যবহার করে সহজে আইটেমগুলোর প্রদর্শনের ক্রম (order), আকার বৃদ্ধি (flex-grow), এবং সংকোচন (flex-shrink) নিয়ন্ত্রণ করা যায়।

উদাহরণ:

• ডাইনামিক সাইজিং যেখানে আইটেমগুলো স্বয়ংক্রিয়ভাবে বৃদ্ধি পাবে বা সংকুচিত হবে।

.flex-item {
  flex-grow: 1;  /* অতিরিক্ত জায়গা দখল করবে */
}

Grid ব্যবহার করবেন যখন:

1. দ্বিমাত্রিক (Two-Dimensional) লেআউট প্রয়োজন:

• CSS Grid একটি দ্বিমাত্রিক লেআউট সিস্টেম, যা সারি (rows) এবং কলাম (columns) উভয় দিকেই উপাদান সাজানোর জন্য ব্যবহার করা হয়। Grid ব্যবহার করলে আপনি একই সাথে উল্লম্ব এবং অনুভূমিকভাবে উপাদানগুলোকে সঠিকভাবে বিন্যস্ত করতে পারবেন।

উদাহরণ:

• কমপ্লেক্স ওয়েব পেজ লেআউট (Header, Sidebar, Main Content, Footer)
• জটিল গ্রিড লেআউট যেমন নিউজ লেআউট, ওয়েব ড্যাশবোর্ড

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px auto;
}

2. সম্পূর্ণ কন্টেইনার নিয়ন্ত্রণের প্রয়োজন:

• Grid ব্যবহারে আপনি পুরো কন্টেইনারের পরিমাণ নির্ধারণ করতে পারেন, যেমন সারির উচ্চতা, কলামের প্রস্থ এবং এদের মধ্যে ফাঁকা জায়গা। এটি জটিল লেআউটগুলোর জন্য সুবিধাজনক।

উদাহরণ:

• বিভিন্ন আকারের এলিমেন্টস বিভিন্ন কলামে সাজানো (e.g., 1st কলাম 200px, 2nd কলাম 1fr)

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

3. মাল্টি-লাইন লেআউট প্রয়োজন:

• Grid বিভিন্ন আইটেমকে একাধিক সারি ও কলামে সাজাতে পারদর্শী। Flexbox শুধুমাত্র এক লাইনে আইটেমগুলি সাজাতে পারে, তবে Grid একাধিক লাইনে উপাদানগুলোর বিন্যাস সোজা করে।

উদাহরণ:

• সারি এবং কলামের ভিত্তিতে একটি ডিজাইন, যেমন একটি গ্যালারি বা ব্লগ।

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

4. উপাদানগুলোর নিখুঁত আকার এবং অবস্থান নির্ধারণ করতে হবে:

• Grid এর মাধ্যমে আপনি উপাদানগুলোর নির্দিষ্ট আকার এবং অবস্থান (positioning) নির্ধারণ করতে পারেন, যেমন একটি উপাদানকে নির্দিষ্ট কলামে বা সারিতে স্থাপন করা।

উদাহরণ:

• বিশেষ সেল বা স্থান নির্ধারণ

.grid-item {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

Flexbox এবং Grid-এর তুলনা

কোন পরিস্থিতিতে কোনটি ব্যবহার করবেন?

• Flexbox: যখন আপনাকে অনুভূমিক বা উল্লম্বভাবে সহজ লেআউট তৈরি করতে হয়, যেখানে উপাদানগুলো এক লাইনে সাজানো থাকে।
  • উদাহরণ: ন্যাভিগেশন বার, বাটন গ্রুপ, একক কলাম লেআউট।
• Grid: যখন আপনাকে একটি দ্বিমাত্রিক (দ্বি-মাত্রিক) লেআউট তৈরি করতে হয় যেখানে উপাদানগুলো সারি ও কলামে সঠিকভাবে সাজানো থাকে।
  • উদাহরণ: ওয়েবপেজ লেআউট, ব্লগ বা নিউজ গ্যালারি, ড্যাশবোর্ড লেআউট।

সারাংশ

Flexbox এবং Grid এর মধ্যে পার্থক্য মূলত তাদের উদ্দেশ্য ও ব্যবহারে। Flexbox একমাত্রিক লেআউটের জন্য এবং Grid দ্বিমাত্রিক লেআউটের জন্য আদর্শ। সঠিক মডেল ব্যবহার করে, আপনি আপনার ওয়েব ডিজাইনকে আরও কার্যকরী, নমনীয় এবং রেস্পন্সিভ করতে পারবেন।

ফ্লেক্সবক্স (Flexbox) এবং CSS গ্রিড (Grid) উভয়ই শক্তিশালী লেআউট মডিউল, যা ওয়েব ডিজাইনে উপাদানগুলোর সঠিক বিন্যাস এবং স্থান নিয়ন্ত্রণে ব্যবহৃত হয়। এগুলোর প্রতিটির নিজস্ব সুবিধা রয়েছে এবং একসাথে ব্যবহারের মাধ্যমে আপনি আরও নমনীয় এবং শক্তিশালী লেআউট তৈরি করতে পারেন।

Flexbox এবং Grid এর সমন্বয়ে লেআউট তৈরি করার প্রয়োজনীয়তা

• Flexbox সবচেয়ে ভালো কাজ করে এক-মাত্রিক (one-dimensional) লেআউটের জন্য (যেমন, একটি সারি বা কলাম), যেখানে উপাদানগুলো অনুভূমিক বা উল্লম্বভাবে সজ্জিত হয়।
• Grid সবচেয়ে ভালো কাজ করে দুই-মাত্রিক (two-dimensional) লেআউটের জন্য (যেমন, সারি এবং কলাম একসাথে), যেখানে উপাদানগুলোকে সঠিকভাবে সারি ও কলামে সাজানো যায়।

এই দুটি মডিউলকে একসাথে ব্যবহার করে আপনি জটিল লেআউট তৈরি করতে পারেন, যেখানে কিছু অংশ গ্রিড মডেল এবং কিছু অংশ ফ্লেক্সবক্স মডেলের সুবিধা ব্যবহার করবে।

Flexbox এবং Grid এর সমন্বয়ে একটি উদাহরণ লেআউট

HTML:

<div class="main-container">
  <div class="header">Header</div>
  <div class="main-content">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:

/* মূল কন্টেইনার */
.main-container {
  display: grid;
  grid-template-rows: 100px 1fr 50px; /* Header, Main Content, Footer */
  grid-template-columns: 1fr; /* এক কলাম */
  height: 100vh; /* পুরো স্ক্রীন */
}

/* হেডার */
.header {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

/* মূল কন্টেন্ট */
.main-content {
  display: flex;
  flex-direction: row; /* Sidebar এবং Content এর মধ্যে অনুভূমিক বিন্যাস */
  gap: 20px; /* Sidebar এবং Content এর মধ্যে ফাঁকা জায়গা */
  padding: 20px;
}

/* সাইডবার */
.sidebar {
  background-color: lightgray;
  padding: 20px;
  width: 25%;
  flex: 1; /* Sidebar এবং Content এর মধ্যে ফাঁকা জায়গা অনুযায়ী পরিবর্তন হবে */
}

/* কন্টেন্ট */
.content {
  background-color: lightyellow;
  padding: 20px;
  width: 70%;
  flex: 3; /* Content বড় হবে, কারণ flex: 3 */
}

/* ফুটার */
.footer {
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

ব্যাখ্যা:

1. Grid Layout (মূল কন্টেইনার):
   • .main-container একটি Grid Container হিসেবে কাজ করছে।
   • grid-template-rows এবং grid-template-columns ব্যবহার করে হেডার, মেইন কন্টেন্ট, এবং ফুটারের জন্য স্থির উচ্চতা এবং কলাম নির্ধারণ করা হয়েছে।
   • 1fr মানে "একটি অংশ", যা মূল কন্টেন্টের জন্য ব্যবহৃত হয়েছে এবং এটা স্ক্রীনের বাকী অংশ দখল করবে।
2. Flexbox Layout (মূল কন্টেন্ট):
   • .main-content একটি Flex Container, যেখানে সাইডবার এবং কন্টেন্ট এলিমেন্টগুলো অনুভূমিকভাবে সজ্জিত হয়েছে (flex-direction: row).
   • gap: 20px ব্যবহৃত হয়েছে সাইডবার এবং কন্টেন্টের মধ্যে জায়গা রাখার জন্য।
3. Flex Items:
   • .sidebar এবং .content ফ্লেক্স আইটেম হিসেবে কাজ করছে, এবং তাদের মধ্যে ফাঁকা জায়গা সঠিকভাবে নিয়ন্ত্রণ করা হয়েছে।
   • .sidebar এর জন্য flex: 1; এবং .content এর জন্য flex: 3; ব্যবহার করা হয়েছে, যাতে কন্টেন্ট এলিমেন্টটি সাইডবারের তুলনায় বেশি জায়গা নেয়।

ফ্লেক্সবক্স এবং গ্রিডের সমন্বয়ে আরও উন্নত উদাহরণ

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

HTML:

<div class="layout">
  <header class="header">Header</header>
  <nav class="nav">Nav</nav>
  <div class="main-content">
    <aside class="sidebar">Sidebar</aside>
    <section class="content">Content</section>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS:

/* মূল কন্টেইনার */
.layout {
  display: grid;
  grid-template-columns: 1fr 3fr; /* সাইডবার এবং কন্টেন্টের জন্য দুইটি কলাম */
  grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
  gap: 20px;
  height: 100vh;
}

/* হেডার */
.header {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

/* ন্যাভিগেশন */
.nav {
  background-color: lightcoral;
  padding: 10px;
  text-align: center;
}

/* মূল কন্টেন্ট */
.main-content {
  display: flex;
  gap: 20px;
}

/* সাইডবার */
.sidebar {
  background-color: lightgreen;
  padding: 10px;
  flex: 1; /* সাইডবারের প্রস্থ 1:3 অনুপাতে কন্টেন্টের সাথে সম্পর্কিত */
}

/* কন্টেন্ট */
.content {
  background-color: lightyellow;
  padding: 10px;
  flex: 3;
}

/* ফুটার */
.footer {
  background-color: lightgray;
  padding: 10px;
  text-align: center;
}

ব্যাখ্যা:

1. Grid Layout:
   • .layout এ display: grid; ব্যবহার করা হয়েছে। এখানে grid-template-columns: 1fr 3fr; ব্যবহার করে সাইডবার এবং কন্টেন্ট এরিয়া জন্য দুটি কলাম তৈরি করা হয়েছে, যেখানে কন্টেন্ট এলিমেন্টটি সাইডবারের তুলনায় ৩ গুণ জায়গা নেবে।
2. Flexbox Layout:
   • .main-content এর মধ্যে সাইডবার এবং কন্টেন্ট এলিমেন্টগুলোকে display: flex; দিয়ে অনুভূমিকভাবে সাজানো হয়েছে।
   • gap: 20px দিয়ে সাইডবার এবং কন্টেন্ট এলিমেন্টের মধ্যে সমান দূরত্ব রাখা হয়েছে।

সারাংশ:

• Flexbox এবং Grid একসাথে ব্যবহারের মাধ্যমে আপনি এক্সটেনসিভ এবং রেস্পন্সিভ ওয়েব লেআউট তৈরি করতে পারেন।
• Grid দুটি মাত্রায় লেআউট তৈরি করতে সক্ষম (সারি এবং কলাম), যা দুই বা তার বেশি আয়তাকার কন্টেন্ট তৈরি করার জন্য আদর্শ।
• Flexbox একমাত্রিক (এক সারি বা কলাম) লেআউট তৈরি করার জন্য ব্যবহার করা হয় এবং এটি স্থান ব্যবস্থাপনা ও উপাদানগুলোর আকার নিয়ন্ত্রণে সাহায্য করে।
• Flexbox এবং Grid এর সমন্বয়ে আপনি বিভিন্ন কনটেইনারের মধ্যে উপাদানগুলোর আকার এবং বিন্যাস নিয়ন্ত্রণ করতে পারেন এবং এর ফলে একটি উন্নত, নমনীয় এবং রেস্পন্সিভ লেআউট তৈরি করতে সক্ষম হবেন।