grid প্রপার্টি

grid প্রপার্টিটি একটি গ্রিড কন্টেইনারের সমস্ত কলাম এবং সারি প্রপার্টির জন্য একটি শর্টহ্যান্ড ফর্ম। সমস্ত মান একটি স্ল্যাশ দ্বারা পৃথক করে একটি লাইনে লেখা হয়।

grid ব্যবহার করে শুধুমাত্র এক ধরনের প্রপার্টি একটি লাইনে বর্ণনা করা যেতে পারে - স্পষ্ট (grid-template-rows, grid-template-columns, grid-template-areas) বা অন্তর্নিহিত (grid-auto-rows, grid-auto-columns, grid-auto-flow)। যে প্রপার্টিগুলো উল্লেখ করা হয়নি, তারা তাদের ডিফল্ট মান গ্রহণ করে।

সিনট্যাক্স

এলিমেন্ট {
	grid: গ্রিড প্রপার্টি;
}

উদাহরণ

আসুন grid প্রপার্টি ব্যবহার করে একটি টেবিল তৈরি করি:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এবং এখন দ্বিতীয় এবং তৃতীয় সারির জন্য একই উচ্চতা এবং প্রতিটি কলামের জন্য বিভিন্ন প্রস্থ সেট করা যাক:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এবং এখন আগের উদাহরণের টেবিলে শীর্ষ সারির উচ্চতা দুই ফ্র্যাকশন করুন, এবং প্রথম কলামটি অর্ধেক ফ্র্যাকশন করুন:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

আরও দেখুন

grid-template প্রপার্টি,
যা একটি এলিমেন্টের জন্য কলাম এবং সারির সংখ্যা এবং প্রস্থ সেট করে
grid-template-rows প্রপার্টি,
যা একটি গ্রিডে সারির সংখ্যা এবং প্রস্থ সেট করে
grid-template-columns প্রপার্টি,
যা একটি গ্রিডে কলামের সংখ্যা এবং প্রস্থ সেট করে
grid-template-areas প্রপার্টি,
যা একটি গ্রিডে এলিমেন্টগুলোর প্লেসমেন্ট সেট করে
grid-auto-flow প্রপার্টি,
যা একটি গ্রিডে এলিমেন্টগুলোর অটো প্লেসমেন্ট সেট করে