বৈশিষ্ট্য grid-row-start

বৈশিষ্ট্য grid-row-start গ্রিড বা নেটওয়ার্কে সারি বরাবর একটি উপাদানের প্রারম্ভিক অবস্থান নির্দিষ্ট করে। বৈশিষ্ট্যের মান একটি ধনাত্মক বা ঋণাত্মক সংখ্যা হতে পারে। যদি আমরা একটি ধনাত্মক সংখ্যা নির্দিষ্ট করি, তবে উপাদানের প্রারম্ভিক অবস্থান উপরে থেকে নীচে গণনা করা হয়। ঋণাত্মক সংখ্যা নির্দিষ্ট করলে উপাদানটি বিপরীত ক্রমে অবস্থান করবে, অর্থাৎ নীচে থেকে উপরের দিকে।

সিনট্যাক্স

সিলেক্টর {
	grid-row-start: ধনাত্মক বা ঋণাত্মক সংখ্যা;
}

উদাহরণ

আসুন গ্রিডে উপাদানগুলির জন্য প্রারম্ভিক অবস্থান নির্দিষ্ট করি:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

উদাহরণ

এবং এখন grid-row-start বৈশিষ্ট্যে ঋণাত্মক সংখ্যা নির্দিষ্ট করি। এখন elem3 সর্বোচ্চ সারি দখল করবে, এবং elem1 - সর্বনিম্ন সারি:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

উদাহরণ

প্রথম ব্লকটি যেন দুটি সারি দখল করে তা করা যাক। এজন্য আমাদের grid-row-start এবং grid-row-end বৈশিষ্ট্যগুলি একত্রিত করতে হবে:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

উদাহরণ

এখন চতুর্থ ব্লকটিকে তিনটি সারি নির্দিষ্ট করি:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

আরও দেখুন

বৈশিষ্ট্য grid-row-end,
যা গ্রিডে সারি বরাবর একটি উপাদানের চূড়ান্ত অবস্থান নির্দিষ্ট করে
বৈশিষ্ট্য grid-row,
যা গ্রিডে সারি বরাবর একটি উপাদানের প্রারম্ভিক এবং চূড়ান্ত অবস্থান নির্দিষ্ট করে
বৈশিষ্ট্য grid-template-rows,
যা গ্রিডে সারির সংখ্যা এবং প্রস্থ নির্দিষ্ট করে
বৈশিষ্ট্য grid-auto-rows,
যা অন্তর্নিহিত গ্রিডে সারির সংখ্যা এবং প্রস্থ নির্দিষ্ট করে