online
CSS Grid Generator — online
ToolHQ দিয়ে CSS Grid layout কোড ভিজ্যুয়ালি তৈরি করুন।
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use CSS Grid Generator
1
ধাপ ১: আপনার Grid Layout নির্বাচন করুন
আপনার গ্রিড লেআউটের জন্য row এবং column সংখ্যা নির্বাচন করুন। আপনি বিভিন্ন pre-designed template থেকে বেছে নিতে পারেন অথবা scratch থেকে একটি custom layout তৈরি করতে পারেন।
2
ধাপ ২: Grid Items যোগ করুন
ToolHQ-এ grid items ড্র্যাগ এবং ড্রপ করে আপনার layout-এ একটি আকর্ষণীয় ডিজাইন তৈরি করুন। আপনি প্রয়োজন অনুযায়ী প্রতিটি item-এর size, color এবং position সামঞ্জস্য করতে পারেন।
3
ধাপ ৪: CSS Code তৈরি করুন
আপনি একবার আপনার grid layout ডিজাইন করে ফেলেন, 'Generate CSS' বাটনে ক্লিক করুন কাস্টম CSS code পেতে যা আপনি আপনার HTML ফাইলে কপি এবং পেস্ট করতে পারবেন।