CSS Flexbox ও Grid প্লেগ্রাউন্ড

CSS Flexbox ও Grid প্লেগ্রাউন্ড কী?

CSS Flexbox ও Grid প্লেগ্রাউন্ড হল CSS-এর দুটি প্রধান লেআউট মডেল শেখা এবং প্রোটোটাইপ তৈরির জন্য একটি ফ্রি ভিজুয়াল স্যান্ডবক্স, যা ফ্রন্ট-এন্ড ডেভেলপার, শিক্ষার্থী এবং ডিজাইনারদের জন্য তৈরি। মোড টগল দিয়ে Flex বা Grid বেছে নিন, তারপর সহজ ড্রপডাউন এবং সংখ্যা ইনপুট দিয়ে কন্টেইনার বৈশিষ্ট্য সেট করুন: Flex মোডে আপনি flex-direction, flex-wrap, justify-content এবং align-items নিয়ন্ত্রণ করেন; Grid মোডে আপনি কতগুলি কলাম এবং সারি (repeat(n, 1fr) হিসেবে রেন্ডার) তার সাথে justify-items এবং align-items সেট করেন। একটি gap মান এবং আইটেম সংখ্যা দুটিতেই প্রযোজ্য। নম্বর দেওয়া টাইলের একটি লাইভ প্রিভিউ ঠিক দেখায় আপনার সারিবদ্ধকরণ এবং ফাঁক কেমন আচরণ করে, এবং সম্পূর্ণ .container CSS নিয়ম কপি করার জন্য জেনারেট হয়। আপনার প্রকল্পে পেস্ট করার আগে কোনো flex বা grid সেটিং আসলে কেমন দেখায় তা দেখতে চাইলে এটি ব্যবহার করুন।

CSS Flexbox ও Grid প্লেগ্রাউন্ড কীভাবে ব্যবহার করবেন

1. কোন লেআউট মডেল তৈরি করবেন তা বেছে নিতে মোড টগল দিয়ে Flex বা Grid বেছে নিন।
2. Flex মোডে, ড্রপডাউন থেকে flex-direction, flex-wrap, justify-content এবং align-items সেট করুন।
3. Grid মোডে, কলাম এবং সারির সংখ্যা, এবং justify-items ও align-items সেট করুন।
4. gap (px-এ ফাঁক) এবং প্রিভিউতে দেখানো আইটেমের সংখ্যা পরিবর্তন করতে সেটিংস খুলুন।
5. প্রতিটি বৈশিষ্ট্য পরিবর্তনের সাথে লাইভ টাইল প্রিভিউ পুনর্বিন্যাস হতে দেখুন।
6. জেনারেট করা .container CSS নিয়মটি কপি করে আপনার স্টাইলশিটে পেস্ট করুন।

উদাহরণ

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

সচরাচর জিজ্ঞাসিত প্রশ্ন

এখানে Flexbox ও Grid-এর মধ্যে পার্থক্য কী?

Flex মোড আইটেমগুলিকে একটি অক্ষ বরাবর সাজায় এবং flex-direction, flex-wrap, justify-content এবং align-items দেখায়। Grid মোড grid-template-columns এবং grid-template-rows (repeat(n, 1fr) হিসেবে লেখা) সহ justify-items এবং align-items ব্যবহার করে আইটেমগুলিকে দ্বি-মাত্রিক গ্রিডে সাজায়। প্রতিটি মডেল একই সারিবদ্ধকরণ কীভাবে পরিচালনা করে তা তুলনা করতে টগল দিয়ে মোড বদলান।

gap মান কী করে?

gap, CSS gap বৈশিষ্ট্যের মাধ্যমে Flex এবং Grid উভয় লেআউটে প্রতিটি আইটেমের মধ্যে পিক্সেলে ফাঁক নির্ধারণ করে। টাইলগুলি দূরে ছড়াতে এটি বাড়ান বা একটি লেগানো লেআউটের জন্য 0 সেট করুন; প্রিভিউ এবং জেনারেট করা CSS উভয়ই তাৎক্ষণিকভাবে আপডেট হয়।

Grid-এ justify-content এবং align-items কেন ভিন্নভাবে লেখা হয়?

Grid, justify-items এবং align-items-এর জন্য start, end, center এবং stretch কীওয়ার্ড ব্যবহার করে, যেখানে Flex flex-start এবং flex-end ব্যবহার করে। টুলটি আপনি যে মোডেই থাকুন না কেন সঠিক কীওয়ার্ড আউটপুট করে, তাই কপি করা CSS সবসময় বৈধ থাকে।

কতগুলি আইটেম দেখানো হবে তা কি আমি পরিবর্তন করতে পারি?

হ্যাঁ। সেটিংস খুলুন এবং নম্বর দেওয়া প্রিভিউ টাইল যোগ বা সরাতে আইটেম সংখ্যা পরিবর্তন করুন (24 পর্যন্ত)। এটি কেবল স্ক্রিনে প্রদর্শনকে প্রভাবিত করে; জেনারেট করা CSS আইটেম নয়, কন্টেইনারকে বর্ণনা করে।

আমার ডেটা কি কোথাও আপলোড হয়?

না। প্লেগ্রাউন্ডটি সম্পূর্ণরূপে আপনার ব্রাউজারে JavaScript দিয়ে চলে, তাই আপনার সেটিং এবং জেনারেট করা CSS কখনও সার্ভারে পাঠানো হয় না। পেজ লোড হওয়ার পর এটি গোপনীয়ভাবে এবং অফলাইনেও কাজ করে।