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

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

CSS Flexbox ও Grid প্লেগ্রাউন্ড হল CSS-এর দুটি প্রধান লেআউট মডেল শেখা এবং প্রোটোটাইপ তৈরির জন্য একটি ফ্রি ভিজুয়াল স্যান্ডবক্স, যা ফ্রন্ট-এন্ড ডেভেলপার, শিক্ষার্থী এবং ডিজাইনারদের জন্য তৈরি। Flex বা Grid বেছে নিন, কন্টেইনার বৈশিষ্ট্য সেট করুন এবং আলাদা আলাদা সন্তানকে স্টাইল দিতে সেটিংস খুলুন: Flex মোডে order, flex-grow, flex-shrink, flex-basis এবং align-self, বা Grid মোডে কলাম/সারি স্প্যান এবং align-self। Grid মোড কাস্টম ট্র্যাক আকারও দেয় — 200px 1fr বা repeat(auto-fit, minmax(120px, 1fr))-এর মতো যেকোনো grid-template-columns/rows মান লিখুন — এবং একটি ভিজুয়াল grid-template-areas সম্পাদক যেখানে আপনি প্রতিটি সেলের নাম দেন, যা নামযুক্ত গ্রিড লাইনও তৈরি করে। নম্বর দেওয়া টাইলের লাইভ প্রিভিউ প্রতিটি পরিবর্তন প্রতিফলিত করে, এবং আপনি শুধু .container নিয়ম বা কন্টেইনার সহ প্রতি-আইটেম CSS রপ্তানি করতে পারেন।

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

1. কোন লেআউট মডেল তৈরি করবেন তা বেছে নিতে মোড টগল দিয়ে Flex বা Grid বেছে নিন।
2. কন্টেইনার বৈশিষ্ট্য সেট করুন — flex-direction/wrap এবং justify/align, বা justify-items/align-items সহ কলাম ও সারির সংখ্যা।
3. gap ও আইটেম সংখ্যা পরিবর্তন করতে এবং প্রতিটি সন্তানকে স্টাইল দিতে (order, flex-grow/shrink/basis, align-self, বা কলাম/সারি স্প্যান) সেটিংস খুলুন।
4. Grid-এ ট্র্যাক আকার কাস্টমে বদলে নিজের grid-template-columns/rows লিখুন — px, fr, minmax() বা repeat(auto-fit/auto-fill, …)।
5. grid-template-areas সম্পাদক চালু করুন এবং আইটেমগুলিকে এলাকা অনুযায়ী রাখতে প্রতিটি সেলের নাম দিন।
6. শুধু কন্টেইনার CSS নাকি কন্টেইনার সহ প্রতি-আইটেম 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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

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

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

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

আমি আলাদা আলাদা আইটেমকে কীভাবে স্টাইল দেব?

সেটিংস খুলুন এবং প্রতি-আইটেম নিয়ন্ত্রণ দিয়ে প্রতিটি সন্তানে order, flex-grow, flex-shrink, flex-basis ও align-self (Flex) বা কলাম/সারি স্প্যান ও align-self (Grid) সেট করুন। রপ্তানি 'কন্টেইনার + আইটেম'-এ রাখুন, আর টুল আপনার কাস্টমাইজ করা প্রতিটি আইটেমের জন্য একটি .container > :nth-child(n) নিয়ম যোগ করে।

আমি কি auto-fit বা minmax()-এর মতো কাস্টম ট্র্যাক আকার ব্যবহার করতে পারি?

হ্যাঁ। Grid মোডে ট্র্যাক আকার কাস্টমে বদলান এবং যেকোনো বৈধ grid-template-columns/rows মান লিখুন — পিক্সেল, fr একক, minmax() বা রেসপনসিভ কলামের জন্য repeat(auto-fit/auto-fill, minmax(120px, 1fr))। লেখার সাথে সাথে প্রিভিউ ও জেনারেট করা CSS আপডেট হয়।

grid-template-areas সম্পাদক কী করে?

Grid মোডে এটি চালু করুন এবং গ্রিডের প্রতিটি সেলের নাম দিন; টুল একটি grid-template-areas ঘোষণা গঠন করে এবং খালি সেল একটি বিন্দু হয়ে যায়। এলাকার নামকরণ নামযুক্ত গ্রিড লাইনও তৈরি করে, এবং ওই আইটেমের grid-area ঘরে নাম লিখে আপনি একটি সন্তানকে কোনো এলাকায় রাখতে পারেন।

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

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