বৈশিষ্ট্য justify-items

বৈশিষ্ট্য justify-items গ্রিড সেলের ভিতরে অনুভূমিক অক্ষ বরাবর উপাদানগুলির সারিবদ্ধকরণ নির্ধারণ করে। সারিবদ্ধকরণ সবচেয়ে স্পষ্টভাবে লক্ষ্য করা যায় ব্রাউজার ডিবাগারে গ্রিড দেখার সময়। প্যারেন্ট এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

সিলেক্টর {
	justify-items: flex-start | flex-end | center ;
}

মানসমূহ

মান	বর্ণনা
`flex-start`	উপাদানগুলি অনুভূমিক অক্ষের শুরুতে চাপা থাকে।
`flex-end`	ব্লকগুলি অনুভূমিক অক্ষের শেষে চাপা থাকে।
`center`	ব্লকগুলি অনুভূমিক অক্ষের কেন্দ্রে অবস্থান করে।

উদাহরণ . অনুভূমিক অক্ষের শুরু বরাবর সারিবদ্ধকরণ

আসুন আমাদের উপাদানগুলিকে সেলের ভিতরে অনুভূমিক অক্ষের শুরু বরাবর সারিবদ্ধ করি:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

এবং এখন ডিবাগারে আমাদের গ্রিডটি দেখি:

উদাহরণ . অনুভূমিক অক্ষের কেন্দ্র বরাবর সারিবদ্ধকরণ

আসুন আমাদের উপাদানগুলিকে সেলের ভিতরে অনুভূমিক অক্ষের কেন্দ্র বরাবর সারিবদ্ধ করি:

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

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

ব্রাউজার ডিবাগার সংযোগ করে আমরা আমাদের গ্রিড দেখতে পাব:

উদাহরণ . অনুভূমিক অক্ষের শেষ বরাবর সারিবদ্ধকरण

আসুন আমাদের উপাদানগুলিকে অনুভূমিক অক্ষের শেষ বরাবর সারিবদ্ধ করি:

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

#parent {
	display: grid;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

এখন ডিবাগারের মাধ্যমে গ্রিডটি দেখি:

আরও দেখুন

বৈশিষ্ট্য align-items,
যা ক্রস অক্ষ বরাবর সারিবদ্ধকরণ নির্ধারণ করে
বৈশিষ্ট্য place-items,
যা গ্রিড সেলের ভিতরে উপাদানগুলির সারিবদ্ধকরণ নির্ধারণ করে