CSS গ্রিড জেনারেটর

কলাম, সারি এবং ফাঁকগুলি দৃশ্যত সংজ্ঞায়িত করুন, তারপর আপনার লেআউটের জন্য CSS গ্রিড টেমপ্লেট কোডটি অনুলিপি করুন।

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

কলাম, সারি, এবং ফাঁকগুলি দৃশ্যত সংজ্ঞায়িত করুন, তারপর CSS গ্রিড টেমপ্লেট কোড অনুলিপি করুন।
আপনার ব্রাউজারে চলে
ব্যবহার করার জন্য বিনামূল্যে

কীভাবে ব্যবহার করবেন

কলাম এবং সারি গণনা সেট করুন।
টিউন ফাঁক এবং ট্র্যাক মাপ.
গ্রিড CSS কপি করুন।

How this tool works

কলাম এবং সারি গণনা সেট করুন।
টিউন ফাঁক এবং ট্র্যাক মাপ.
গ্রিড CSS কপি করুন।

Recommended settings

প্রথমে ডিফল্ট বিকল্পগুলি ব্যবহার করুন, তারপর প্রয়োজন হলে সামঞ্জস্য করুন

Supported formats

Text / on-page input

File size and limits

খুব জটিল মাল্টি-লেয়ার প্রিভিউ পুরানো ফোনে ধীরগতির মনে হতে পারে।

Privacy

রঙ এবং CSS জেনারেটর সম্পূর্ণরূপে আপনার ব্রাউজারে চলে। পূর্বরূপ এবং রূপান্তর আপনার শৈলী আপলোড না.

Common use cases

যখনই আপনার প্রয়োজন হবে তখন CSS গ্রিড জেনারেটর ব্যবহার করুন: কলাম, সারি এবং ফাঁকগুলি দৃশ্যমানভাবে সংজ্ঞায়িত করুন, তারপর CSS গ্রিড টেমপ্লেট কোড অনুলিপি করুন।

Troubleshooting

প্রিভিউ পেস্ট করার পরে ভিন্ন দেখায়

আপনার পৃষ্ঠায় প্রতিযোগী CSS পরীক্ষা করুন (রিসেট, উত্তরাধিকারসূত্রে পাওয়া রং)। উত্পন্ন নিয়মটি প্রথমে একটি বিচ্ছিন্ন স্টাইলশীটে অনুলিপি করুন।

প্রশ্নোত্তর

এটি কি আমার সিএসএস আপলোড করে?

না। জেনারেটর এবং রূপান্তরকারী লাইভ প্রিভিউ সহ আপনার ব্রাউজারে চলে।

আমি একটি অ্যাকাউন্ট প্রয়োজন?

না। টুল খুলুন, নিয়ন্ত্রণ পরিবর্তন করুন এবং CSS কপি করুন।