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

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

সিনট্যাক্স

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;
  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;
}

Результат:

আসুন ব্রাউজার ডিবাগার এর মাধ্যমে আমাদের গ্রিডটি দেখি:

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

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;
  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;
}

Результат:

এবং এখন ডিবাগার প্যানেলে একনজর দেখি:

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

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;
  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;
}

Результат:

আসুন ব্রাউজার ডিবাগার এর সাহায্যে কক্ষগুলির মধ্যে উপাদানগুলির সারিবদ্ধকরণ দেখি:

আরও দেখুন