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

একটি ইন্টারেক্টিভ CSS গ্রিড জেনারেটর ও প্লেগ্রাউন্ড

এই CSS গ্রিড জেনারেটর বিমূর্ত গ্রিড সিনট্যাক্সকে এমন কিছুতে পরিণত করে যা আপনি দেখতে ও টেনে নিতে পারেন। আপনার কলাম ও সারি সেট করুন, লাইভ প্রিভিউকে পুনর্বিন্যস্ত হতে দেখুন, এবং ঠিকঠাক দেখালে পরিষ্কার CSS, Tailwind বা HTML কপি করুন। কিছু ইনস্টল করার নেই এবং কোনো অ্যাকাউন্ট তৈরির নেই — পুরো CSS গ্রিড প্লেগ্রাউন্ড আপনার ব্রাউজারে চলে, তাই আপনি যেসব লেআউট তৈরি করেন তা কখনও আপলোড হয় না।

আপনি গ্রিড কীভাবে কাজ করে তা শিখছেন, একটি ড্যাশবোর্ড প্রোটোটাইপ করছেন, বা প্লেইন CSS হিসেবে একটি ১২-কলাম ফ্রেমওয়ার্ক পুনরায় তৈরি করছেন যা-ই হোক না কেন, আপনি এটি এখানে সেকেন্ডেই করতে পারেন। আইটেম-স্তরের এডিটিং ছাড়া শুধু CSS আউটপুট করা Layoutit-এর বিপরীতে, বা Tailwind বা শেয়ারযোগ্য লিংক ছাড়া Sarah Drasner-এর মিনিমাল CSS Grid Generator-এর বিপরীতে, UtiloKit একই ইন্টারফেসে তিনটি আউটপুট ফরম্যাট এবং নামযুক্ত এরিয়া সাপোর্ট একত্রিত করে।

আপনার ট্র্যাক সেট করুন: কলাম, সারি এবং একক

একটি গ্রিড তার ট্র্যাক দ্বারা সংজ্ঞায়িত। Tracks ট্যাবে আপনার প্রয়োজন অনুযায়ী কলাম ও সারি যোগ করুন এবং প্রতিটির জন্য একটি একক বেছে নিন: নমনীয় ভগ্নাংশের জন্য fr, নির্দিষ্ট আকারের জন্য px বা %, কনটেন্টে ফিট করতে auto, বা একটি ন্যূনতম ও সর্বোচ্চের মধ্যে ফ্লেক্স করা ট্র্যাকের জন্য minmax()। অভিন্ন প্রতিবেশী ট্র্যাকগুলো স্বয়ংক্রিয়ভাবে repeat() দিয়ে সংক্ষিপ্ত হয়, তাই তিনটি সমান কলাম 1fr 1fr 1fr-এর বদলে ঝরঝরে repeat(3, 1fr) হয়ে যায়।

কলাম ১২-এ সেট করুন আর আপনার কাছে একটি ক্লাসিক Bootstrap-স্টাইল ফ্রেমওয়ার্ক গ্রিড থাকবে প্লেইন CSS হিসেবে। দুই কলাম ও দুই সারি সেট করুন একটি দ্রুত 2x2 লেআউটের জন্য। grid-template-columns এবং grid-template-rows আউটপুট প্রতিটি পরিবর্তনের সাথে আপডেট হয়, তাই আপনি সবসময় আপনার লেআউট তৈরি করা সঠিক কোড দেখতে পান।

auto-fit এবং minmax() দিয়ে রেসপনসিভ করুন

রেসপনসিভ CSS গ্রিড জেনারেটর মোড আপনার জন্য আধুনিক, মিডিয়া-কোয়েরি-মুক্ত প্যাটার্ন লেখে: repeat(auto-fit, minmax(200px, 1fr))। auto-fit বা auto-fill বেছে নিন, ন্যূনতম সেল প্রস্থ সেট করুন, এবং আপনি রিসাইজ করার সাথে সাথে প্রিভিউ পুনর্বিন্যস্ত হয় — চওড়া স্ক্রিনে কলাম যোগ করে এবং মোবাইলে একটিতে নেমে আসে। কোনো মিডিয়া কোয়েরি না লিখেই একটি ফ্লুইড কার্ড গ্রিড তৈরির এটি সবচেয়ে দ্রুত উপায় যা যেকোনো স্ক্রিন প্রস্থে কাজ করে।

গ্রিডে কন্টেইনার যত আইটেম ধরে রাখতে পারে তার চেয়ে কম আইটেম থাকলে auto-fit ও auto-fill-এর মধ্যকার পার্থক্য গুরুত্বপূর্ণ হয়ে ওঠে। auto-fit খালি ট্র্যাক ধসিয়ে দেয় যাতে পূর্ণ আইটেমগুলো জায়গা ঢাকতে প্রসারিত হয়। auto-fill খালি ট্র্যাক রাখে যাতে আইটেমগুলো তাদের ন্যূনতম আকার রাখে। এই প্লেগ্রাউন্ড আপনাকে এদের মধ্যে টগল করতে এবং প্রভাবটি লাইভ দেখতে দেয়, যা স্ট্যাটিক CSS রিসোর্স আপনাকে দেখাতে পারে না।

আইটেম টেনে বসান — বা আপনার এরিয়ার নাম দিন

Tracks মোডে প্রিভিউ ইন্টারেক্টিভ: সেলগুলো জুড়ে টেনে নিন যাতে একটি আইটেম বসে যা সেগুলো জুড়ে বিস্তৃত হয়, একটি আইটেম নির্বাচন করতে ক্লিক করুন, এবং আইটেম প্যানেলে এর grid-column ও grid-row শুরু ও স্প্যান মান সূক্ষ্মভাবে ঠিক করুন। এটি স্প্যানিং কীভাবে কাজ করে তা বোঝার দ্রুততম উপায় — ডকুমেন্টেশন পড়ার চেয়ে দ্রুত, CodePen পরীক্ষার চেয়ে দ্রুত।

পাঠযোগ্য পদ্ধতি পছন্দ করেন? Areas ট্যাব grid-template-areas ব্যবহার করে — আপনার লেআউট নামযুক্ত সারি হিসেবে স্কেচ করুন যেমন 'header header' 'sidebar main', আর জেনারেটরটি টেমপ্লেট প্লাস আপনার নাম দেওয়া প্রতিটি অঞ্চলের জন্য একটি grid-area নিয়ম তৈরি করে। হেডার, সাইডবার, মেইন এবং ফুটারসহ পেজ শেলের জন্য নিখুঁত। Layoutit-এ একই রকম এরিয়া এডিটর আছে কিন্তু এরিয়া-ভিত্তিক লেআউটের জন্য Tailwind আউটপুট তৈরি করে না।

CSS, Tailwind বা HTML কপি করুন — এবং একটি লিংক দিয়ে শেয়ার করুন

প্রতিটি লেআউট তিন উপায়ে এক্সপোর্ট হয়। CSS ট্যাব কন্টেইনার নিয়ম প্লাস প্রতি-আইটেম নিয়ম দেয়। Tailwind CSS গ্রিড জেনারেটর ট্যাব সমতুল্য ইউটিলিটি ক্লাস লেখে — grid grid-cols-3 gap-4, col-span-2, এবং কাস্টম ট্র্যাকের জন্য arbitrary মান। HTML ট্যাব রেডি-টু-পেস্ট মার্কআপ দেয়। একটি শেয়ারযোগ্য লিংক পুরো কনফিগারেশনকে URL-এ এনকোড করে, তাই একজন সহকর্মী ঠিক একই গ্রিড খোলে — কোনো অ্যাকাউন্ট নেই, এক্সপোর্ট নেই, স্ক্রিনশটের দরকার নেই।

ফ্রি, প্রাইভেট এবং তাৎক্ষণিক — আপলোড নেই, অ্যাকাউন্ট নেই

সাইনআপের জন্য কিছু নেই এবং ডাউনলোড করার কিছু নেই। ট্র্যাক তৈরি, আইটেম টেনে নেওয়া, রেসপনসিভ auto-fit-এ সুইচ করা, এবং কোড এক্সপোর্ট করা — সবকিছুই স্থানীয়ভাবে আপনার ব্রাউজারে ঘটে, তাই আপনার কাজ কখনও আপনার ডিভাইস ছেড়ে যায় না। Figma-র মতো ওয়েব-ভিত্তিক ডিজাইন টুলের বিপরীতে যার অ্যাকাউন্ট প্রয়োজন এবং আপনার কাজ তাদের সার্ভারে সংরক্ষণ করে, এই CSS গ্রিড প্লেগ্রাউন্ড সম্পূর্ণভাবে প্রাইভেট। এই গ্রিড লেআউট জেনারেটর বুকমার্ক করুন এবং যখনই একটি CSS গ্রিড তৈরি, শেখা বা কপি করার দরকার হয় তখন ব্যবহার করুন — যেকোনো ডিভাইসে, আইফোন ও অ্যান্ড্রয়েড সহ।

CSS গ্রিড বনাম ফ্লেক্সবক্স: সঠিক টুল বেছে নেওয়া

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

Grid-এর অটো-প্লেসমেন্ট অ্যালগরিদম স্বয়ংক্রিয়ভাবে পরবর্তী উপলব্ধ সেলে আইটেম ভরে দেয়, ঠিক রিডিং অর্ডারের মতো বাম-থেকে-ডান এবং ওপর-থেকে-নিচ প্রবাহিত হয়ে। grid-auto-flow: dense যোগ করুন আর ব্রাউজার ছোট আইটেম দিয়ে আগের ফাঁক ব্যাক-ফিল করে — ম্যাসনরি-স্টাইল গ্যালারির জন্য উপযোগী যেখানে আপনি কোনো নষ্ট সাদা স্থান চান না। Grid এক্সপ্লিসিট গ্রিড-এর মধ্যেও পার্থক্য করে (grid-template-columns ও grid-template-rows দিয়ে আপনি সংজ্ঞায়িত করেন এমন ট্র্যাক) এবং ইমপ্লিসিট গ্রিড (আইটেমগুলো এক্সপ্লিসিট সংজ্ঞা ছাপিয়ে গেলে ব্রাউজার স্বয়ংক্রিয়ভাবে তৈরি করে এমন অতিরিক্ত ট্র্যাক)। আপনি grid-auto-columns ও grid-auto-rows দিয়ে ইমপ্লিসিট ট্র্যাক সাইজিং নিয়ন্ত্রণ করেন।

আইটেমের সংখ্যা অজানা বা পরিবর্তনশীল হলে Flexbox জিতে যায়, কারণ এটি একটি ঘোষিত কলাম সংখ্যা ছাড়াই স্বাভাবিকভাবে র‍্যাপ ও পুনর্বিন্যস্ত হয়। একটি ট্যাগ ক্লাউড, একটি ফ্লেক্স-র‍্যাপড কার্ড তালিকা, বা রানটাইমে আইটেম উপস্থিত ও অদৃশ্য হয় এমন একটি টুলবার — সবই display: flex; flex-wrap: wrap-এর প্রাকৃতিক ফিট। দুটি সিস্টেম একসাথে কাজ করার জন্যও ডিজাইন করা: একটি CSS Grid কন্টেইনার এমন সেল ধরে রাখতে পারে যার চাইল্ডগুলো Flexbox কন্টেইনার, Grid-এর কাঠামোগত নির্ভুলতাকে Flexbox-এর আইটেম-স্তরের বণ্টনের সাথে মিলিয়ে।

নামযুক্ত গ্রিড এরিয়া: শব্দার্থগত, রক্ষণাবেক্ষণযোগ্য লেআউট

grid-template-areas প্রোপার্টি একটি CSS নিয়মের ভেতরে একটি ASCII মানচিত্র হিসেবে একটি লেআউট বর্ণনা করতে দেয়। প্রতিটি উদ্ধৃত স্ট্রিং একটি সারি, তার ভেতরের প্রতিটি শব্দ একটি সেল, এবং সংলগ্ন সেল জুড়ে একই শব্দ পুনরাবৃত্তি করলে সেগুলো একটি একক অঞ্চলে মিশে যায়। একটি ক্লাসিক পেজ শেল দেখতে এমন: "header header" "sidebar main" "footer footer"। প্রতিটি চাইল্ডকে grid-area: header, grid-area: sidebar ইত্যাদি নাম দিন, আর ব্রাউজার স্বয়ংক্রিয়ভাবে তাদের মিলিত অঞ্চলে সংযুক্ত করে দেয় — কোনো লাইন সংখ্যা নেই, কোনো span গণিত নেই।

পুরো একটি দল স্পর্শ করবে এমন লেআউটের জন্য নামযুক্ত এরিয়া সাংখ্যিক লাইন-ভিত্তিক প্লেসমেন্টের চেয়ে অনেক বেশি রক্ষণাবেক্ষণযোগ্য। একজন ডিজাইনার যখন সাইডবার ডানে সরাতে বলেন, তখন আপনি grid-template-areas-এ একটি স্ট্রিং পাল্টান আর DOM অর্ডার একদম একই থাকে — কোনো মার্কআপ পুনঃক্রম নেই, কোনো কলাম ইনডেক্স পুনর্গণনা নেই। এটি ভিজ্যুয়াল অর্ডার-কেও সোর্স অর্ডার থেকে আলাদা করে, যা অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ: স্ক্রিন রিডার DOM অনুসরণ করে, দৃষ্টিসম্পন্ন ব্যবহারকারীরা গ্রিড বিন্যাস দেখেন।

DOM পরিবর্তন ছাড়াই রেসপনসিভ রিডিজাইনের জন্য নামযুক্ত এরিয়া সবচেয়ে শক্তিশালী টুল। একটি মিডিয়া কোয়েরির ভেতরে আপনি grid-template-areas-কে সম্পূর্ণ ভিন্ন একটি লেআউট স্ট্রিং-এ পুনর্সংজ্ঞায়িত করেন — একটি তিন-কলামের ডেস্কটপ শেলকে মোবাইলের জন্য একটি একক স্ট্যাকড কলামে পরিণত করুন — আর প্রতিটি নামযুক্ত চাইল্ড কোনো JavaScript ছাড়াই নিজেকে পুনঃস্থাপন করে। একই ব্রেকপয়েন্টে grid-template-columns পরিবর্তনের সাথে মিলিয়ে, একটি একক CSS ব্লক পুরো পেজ কাঠামোকে ডেস্কটপ থেকে ট্যাবলেট থেকে ফোনে পরিবর্তিত করতে পারে।

fr একক, ইন্ট্রিনসিক সাইজিং কীওয়ার্ড, এবং RAM প্যাটার্ন

fr একক (ভগ্নাংশ) নির্দিষ্ট ও কনটেন্ট-সাইজড ট্র্যাক সমাধান হওয়ার পর অবশিষ্ট স্থান বণ্টন করে। 1fr 1fr 1fr বাকি প্রস্থকে তিনটি সমান ভাগে ভাগ করে। গুরুত্বপূর্ণভাবে, fr স্বয়ংক্রিয়ভাবে gap বিবেচনা করে — ভগ্নাংশ হিসাব করার আগে গ্যাপ বিয়োগ করা হয় — যেখানে শতাংশ প্রস্থ প্যারেন্টের মোট প্রস্থের এবং গ্যাপ উপেক্ষা করে, যা আপনি সতর্ক না থাকলে আইটেম ওভারফ্লো ঘটায়। শর্টহ্যান্ড repeat(3, 1fr) ঠিক সমতুল্য কিন্তু পুনরাবৃত্তি ছাড়াই স্কেল করে।

fr-এর বাইরে, CSS Grid তিনটি ইন্ট্রিনসিক সাইজিং কীওয়ার্ড সমর্থন করে। min-content একটি ট্র্যাককে ঠিক তার দীর্ঘতম অবিভাজ্য শব্দের মতো সরু করে — আইকন কলাম বা লেবেল ট্র্যাকের জন্য উপযোগী যা তাদের কনটেন্টকে জড়িয়ে ধরা উচিত। max-content একটি ট্র্যাককে কন্টেইনার উপেক্ষা করে তার প্রশস্ততম প্রাকৃতিক প্রস্থে বাড়তে দেয়। fit-content(value) একটি স্মার্ট ক্ল্যাম্প: এটি সরবরাহকৃত সর্বোচ্চ পর্যন্ত max-content-এর মতো আচরণ করে, তারপর বৃদ্ধি বন্ধ করে — একটি সাইডবারের জন্য উপযোগী যা তার কনটেন্টে ফিট করতে প্রসারিত হওয়া উচিত কিন্তু কখনও, বলুন, ৩০০পিক্স অতিক্রম করা উচিত নয়।

সবচেয়ে শক্তিশালী রেসপনসিভ গ্রিড কৌশল হলো RAM প্যাটার্ন — Repeat, Auto, Minmax: repeat(auto-fill, minmax(200px, 1fr))। কোনো মিডিয়া কোয়েরি দরকার নেই। ব্রাউজার যত ২০০পিক্স ন্যূনতম কলাম কন্টেইনার ধরতে পারে তত প্যাক করে; ৮০০পিক্স কন্টেইনারে আপনি চারটি কলাম পাবেন, ৪৮০পিক্স কন্টেইনারে দুটি, ৩০০পিক্স কন্টেইনারে একটি। auto-fill-কে auto-fit-এ সুইচ করুন আর খালি ট্র্যাক ধসে যায় যাতে পূর্ণ আইটেমগুলো সারি পূরণ করতে প্রসারিত হয়। CSS-এর এই একটি লাইন কার্ড গ্রিড, ইমেজ গ্যালারি এবং প্রোডাক্ট তালিকার জন্য একটি সাধারণ তিন-ব্রেকপয়েন্ট মিডিয়া কোয়েরি ব্লক প্রতিস্থাপন করে।

CSS Grid-এ অ্যালাইনমেন্ট: অক্ষ, প্রোপার্টি এবং place-* শর্টহ্যান্ড

CSS Grid-এর দুটি অ্যালাইনমেন্ট অক্ষ আছে। ইনলাইন অক্ষ টেক্সট প্রবাহের দিকে চলে (ইংরেজিতে বাম থেকে ডান) এবং ব্লক অক্ষ এর লম্বভাবে চলে (ওপর থেকে নিচ)। justify- দিয়ে প্রিফিক্স করা প্রোপার্টি ইনলাইন অক্ষে কাজ করে; align- দিয়ে প্রিফিক্স করা প্রোপার্টি ব্লক অক্ষে কাজ করে। এই অক্ষ পার্থক্যটাই প্রতিটি আলাদাভাবে মুখস্থ না করে ছয়টি অ্যালাইনমেন্ট প্রোপার্টি পড়ার চাবিকাঠি।

justify-items এবং align-items নিয়ন্ত্রণ করে প্রতিটি আইটেম তার নিজের সেলের মধ্যে কীভাবে অবস্থান করে। ডিফল্ট হলো stretch, যা আইটেমগুলোকে সেল পূরণ করতে বাধ্য করে — এই কারণেই গ্রিড আইটেমগুলো কোনো এক্সপ্লিসিট প্রস্থ বা উচ্চতা ছাড়াই ডিফল্টরূপে তাদের সেল ঢেকে প্রসারিত হয়। উভয়কে center-এ সেট করলে প্রতিটি আইটেম তার সেলের ভেতরে কেন্দ্রীভূত হয়। justify-content এবং align-content পুরো গ্রিড জুড়ে অতিরিক্ত স্থান বণ্টন করে, Flexbox-এর মূল অক্ষের জন্য justify-content-এর অনুরূপ — যখন মোট ট্র্যাক সাইজ কন্টেইনারের চেয়ে ছোট তখন উপযোগী। justify-self এবং align-self হলো প্রতি-আইটেম ওভাররাইড যা প্রতিবেশী আইটেমকে স্পর্শ না করে একটি স্বতন্ত্র আইটেমকে কন্টেইনারের ডিফল্ট অ্যালাইনমেন্ট থেকে বের করে আনে।

place-items, place-content এবং place-self শর্টহ্যান্ড ব্লক ও ইনলাইন মান একটি ঘোষণায় একত্রিত করে: place-items: center align-items: center; justify-items: center-এর সমতুল্য। এটি সেই সমস্যার জন্য বিখ্যাতভাবে সংক্ষিপ্ত CSS জন্ম দেয় যা একসময় টেবিল ও JavaScript প্রয়োজন করত: display: grid; place-items: center — দুই লাইন যা একটি একক চাইল্ডকে তার কন্টেইনারের ভেতরে অনুভূমিক ও উলম্ব উভয়ভাবে কেন্দ্রীভূত করে, CSS-এর ঐতিহাসিকভাবে সবচেয়ে কঠিন লেআউট সমস্যাগুলোর একটি সবচেয়ে সংক্ষিপ্ত নিয়মে সমাধান করে।