CSS গ্রিড পরিচিতি

CSS গ্রিডগুলি অনুভূমিক এবং উল্লম্ব উভয়ভাবে উপাদান স্থাপনের একটি উপায়। ফ্লেক্সবক্সের তুলনায় এটি একটি আরও উন্নত পদ্ধতি, কিন্তু আয়ত্ত করতে আরও জটিল।

একটি গ্রিড তৈরি করতে, আপনাকে একটি উপাদানের display বৈশিষ্ট্য grid মানে সেট করতে হবে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

এর পরে, উপাদানটি একটি দ্বি-মাত্রিক গ্রিডে পরিণত হবে, যেখানে উপাদানগুলি উল্লম্বভাবে (কলাম) এবং অনুভূমিকভাবে (সারি) সাজানো থাকে। একটি কলাম এবং একটি সারির ছেদবিন্দুর এলাকাকে সেল বলা হয়।

বিশেষ বৈশিষ্ট্যগুলি ব্যবহার করে, আপনি উপাদানগুলিকে সারি এবং কলাম উভয় দিক দিয়েই স্থাপন করতে পারবেন। এটি সহজেই নিম্নলিখিত জিনিসগুলি তৈরি করতে দেবে:

পরবর্তী পাঠগুলিতে, আমরা প্রথমে কলাম বরাবর উপাদান স্থাপন শিখব, তারপর সারি নিয়ে অধ্যয়নে এগিয়ে যাব, এবং তারপর সবকিছু একসাথে মিলিত করব।