CSS গ্রিডের ভিতরে অনুভূমিক অক্ষ বরাবর সেলগুলিতে অ্যালাইনমেন্ট
গ্রিডের সেলগুলির ভিতরে এলিমেন্টগুলিকে অ্যালাইন করতে,
অর্থাৎ,那些 স্তম্ভ এবং সারিগুলির ছেদবিন্দুতে তৈরি হওয়া অঞ্চলগুলিতে,
justify-items প্রপার্টি ব্যবহার করা হয়, যা
প্যারেন্ট এলিমেন্টে সেট করা হয়।
ব্রাউজার ডিবাগারে গ্রিড দেখার সময় অ্যালাইনমেন্ট
সবচেয়ে স্পষ্টভাবে লক্ষ্য করা যায়।
অক্ষের শুরুতে
আসুন আমাদের এলিমেন্টগুলিকে সেলের ভিতরে অনুভূমিক অক্ষের শুরু বরাবর অ্যালাইন করি:
<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);
grid-gap: 10px;
padding: 10px;
height: 200px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
grid-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);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-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);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
এবার আমাদের গ্রিডটি ডিবাগারে দেখি:
ব্যবহারিক কাজ
পাঁচটি এলিমেন্ট নিয়ে একটি গ্রিড তৈরি করুন, যেগুলো তিনটি সারিতে সাজানো থাকবে। এলিমেন্টগুলোর অনুভূমিক অক্ষ বরাবর অ্যালাইনমেন্ট সম্পন্ন করুন।
এবার এলিমেন্টগুলিকে দুটি সারিতে সাজান এবং সেলগুলির ভিতরে এলিমেন্টগুলিকে অনুভূমিক অক্ষের কেন্দ্র বরাবর অ্যালাইন করুন।
আগের কাজটি পরিবর্তন করুন, যাতে এলিমেন্টগুলির অ্যালাইনমেন্ট অনুভূমিক অক্ষের শেষ বরাবর হয়।
