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

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

আসুন উদাহরণের মাধ্যমে এই প্রপার্টির কাজ দেখি।

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

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

css#parent {
  display: grid;
  place-items: center start;
  grid-template-columns: 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;
  place-items: end center;
  grid-template-columns: 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;
  place-items: start end;
  grid-template-columns: 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;
}

Результат:

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

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