CSS গ্রিডের ভিতরে উভয় অক্ষ বরাবর এলাইনমেন্ট

গ্রিডের ভিতরে উপাদানগুলির এলাইনমেন্ট একই সাথে অনুভূমিক এবং উল্লম্ব উভয় অক্ষ বরাবর নির্ধারণ করা যেতে পারে। এই উদ্দেশ্যে আমরা দুটি বৈশিষ্ট্য সংমিশ্রণ করতে পারি justify-items এবং align-items, যা মূল উপাদানে নির্ধারিত হয়।

অক্ষের কেন্দ্র বরাবর

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

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

css#parent {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

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

অনুভূমিকের শুরু এবং উল্লম্বের শেষ বরাবর

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

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

css#parent {
  display: grid;
  justify-items: start;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

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

অনুভূমিকের শেষ এবং উল্লম্বের শুরু বরাবর

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

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

css#parent {
  display: grid;
  justify-items: end;
  align-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

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

ব্যবহারিক কাজ