আমি কীভাবে দৃশ্যমানভাবে একটি CSS গ্রিড লেআউট তৈরি করব?

গ্রিড সেট করতে কলাম যোগ করুন এবং সারি যোগ করুন ব্যবহার করুন, প্রতিটি ট্র্যাকের জন্য একটি ইউনিট বেছে নিন, এবং কলাম গ্যাপ ও সারি গ্যাপ সামঞ্জস্য করুন। তারপর CSS বা মিল থাকা HTML নিতে কপি করুন টিপুন।

আমি কতগুলো কলাম ও সারি যোগ করতে পারি, এবং কোন ইউনিটগুলো উপলব্ধ?

সর্বোচ্চ ১২টি কলাম এবং ১২টি সারি। প্রতিটি ট্র্যাক হতে পারে 1fr, 2fr, 3fr, auto, নির্দিষ্ট px মান, শতাংশ, min-content, max-content বা minmax(100px, 1fr) স্টাইলের রেঞ্জ।

শুরু করার জন্য কি তৈরি লেআউট আছে?

হ্যাঁ। প্রিসেটগুলো হলো হলি গ্রেইল, সাইডবার + কন্টেন্ট, ১২-কলাম এবং ফটো গ্যালারি। একটি বেছে নিন, তারপর আপনার পৃষ্ঠার সাথে মানানসই করতে ট্র্যাক এবং গ্যাপ সম্পাদনা করুন।

আমি কীভাবে বুটস্ট্র্যাপের মতো একটি ১২-কলামের গ্রিড তৈরি করব?

১২-কলাম প্রিসেট বেছে নিন, যা ১৬px গ্যাপ সহ বারোটি 1fr কলাম সেট করে। তারপর আপনি কলাম গ্যাপ স্লাইডার পরিবর্তন করতে পারেন, যা ০ থেকে ৪৮px পর্যন্ত যায়।

টুলটি কি আমার গ্রিড কোথাও পাঠায়, এবং আমি কি একটি লেআউট শেয়ার করতে পারি?

সবকিছু আপনার ব্রাউজারে চলে এবং কিছুই আপলোড করা হয় না। টুলটি পৃষ্ঠার URL থেকে একটি কনফিগারেশন পুনরুদ্ধার করতে তৈরি, তাই একটি লিঙ্ক আপনার গ্রিড পুনরায় তৈরি করতে পারে।

এটি কি সত্যিই বিনামূল্যে?

হ্যাঁ। প্রতিটি টুল বিনামূল্যে ব্যবহার করা যায়, কোনো অ্যাকাউন্ট বা ক্রেডিট কার্ড ছাড়াই। কাজটি আমাদের সার্ভারের পরিবর্তে আপনার ডিভাইসে চলে, যার কারণে এটি চালানো বিনামূল্যে থাকে।

এটি মোবাইলে কাজ করে?

হ্যাঁ। কিছু ইনস্টল না করেই iOS ও Android-এর আধুনিক মোবাইল ব্রাউজারে চলে।

🟦

বিনামূল্যে CSS গ্রিড জেনারেটর

একটি CSS গ্রিড ভিজ্যুয়ালি ডিজাইন করুন — ট্র্যাক, ইউনিট এবং গ্যাপ — এবং তৈরি CSS এবং HTML কপি করুন।

ব্রাউজারেই চলেসাইন-আপ নেই, পপ-আপ নেইলগইনের প্রয়োজন নেইচিরকালের জন্য বিনামূল্যে

একবার লোড হলে অফলাইনেও কাজ করে

একটি CSS গ্রিড ভিজ্যুয়ালি ডিজাইন করুন: কলাম এবং সারি যোগ করুন, fr/px/auto/min-content ইউনিট মিশ্রিত করুন, গ্যাপ সামঞ্জস্য করুন এবং লাইভ প্রিভিউ দেখুন। প্রোডাকশন-রেডি CSS এবং ম্যাচিং HTML কপি করুন।

প্রিসেট

কলাম (3)

সারি (2)

কলাম গ্যাপ: 16pxসারি গ্যাপ: 16px

লাইভ প্রিভিউ

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 সবকিছু আপনার ব্রাউজারে চলে — কিছুই আপলোড করা হয় না।

কিভাবে কাজ করে

দৃশ্যমানভাবে একটি CSS grid ডিজাইন করুন: সর্বোচ্চ 8টি কলাম ও 8টি সারি যোগ করুন, প্রতিটি track-কে fr, px, auto বা min/max-content-এ সেট করুন, এবং সারি/কলামের ফাঁক বদলান। নম্বরযুক্ত লাইভ প্রিভিউ সঙ্গে সঙ্গে আপডেট হয়, আর তৈরি grid-template CSS ও মিলে যাওয়া HTML এক ক্লিকেই ক্লিপবোর্ডে।

1
গ্রিডের আকার দিন
+ ও − দিয়ে কলাম ও সারি যোগ/সরান।
2
track সেট করুন
প্রতিটি কলাম ও সারি নিজস্ব একক পায় (1fr, 100px, auto…)।
3
ফাঁক ঠিক করুন
row-gap ও column-gap-এর আলাদা স্লাইডার।
4
কোড কপি করুন
প্রোডাকশন-উপযোগী CSS ও মিলে যাওয়া HTML কাঠামো।

সবকিছু আপনার ব্রাউজারে চলে — কিছুই আপলোড হয় না।

বিনামূল্যে CSS গ্রিড জেনারেটর

কিভাবে কাজ করে

সম্পর্কিত টুলস

CSS ফ্লেক্সবক্স জেনারেটর

CSS clamp() জেনারেটর

প্রিন্টযোগ্য কাগজ — রুলটানা, গ্রাফ, ডট গ্রিড ও সংগীতের কাগজ (PDF)

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