CSS-এ অন্তর্নিহিত গ্রিড

অন্তর্নিহিত গ্রিড ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে তৈরি হয়, যখন উপাদানের সংখ্যা স্পষ্ট গ্রিডে ফিট না হয়। চলুন দেখি কিভাবে এটি ঘটে।

ধরুন আমাদের চারটি ব্লক আছে:

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

ধরুন আমাদের গ্রিডের মাপ 3 বাই 3:

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

আমাদের তিনটি ব্লককে গ্রিড বরাবর স্থাপন করি:

css#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

এবং চতুর্থ ব্লকটিকে স্থাপন করি চতুর্থ সারি এবং কলামে:

css#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

যেহেতু আমাদের গ্রিডের মাপ 3 বাই 3, তাই এই গ্রিডে চতুর্থ সারি এবং কলাম থাকবে না। কিন্তু সেগুলো স্পষ্ট ভাবে থাকবে না, যা আমরা নির্ধারণ করেছি। কিন্তু ব্রাউজার সেগুলো অন্তর্নিহিত ভাবে তৈরি করবে, অর্থাৎ নিজে থেকেই।

এক্ষেত্রে, যেহেতু আমরা শুধুমাত্র স্পষ্ট গ্রিডের জন্য মাত্রা উল্লেখ করেছি, তাই এই গ্রিডের বাইরের সেলগুলোর মাত্রা ব্রাউজার দ্বারা গণনা করা হবে। অর্থাৎ আমাদের ক্ষেত্রে চতুর্থ ব্লকের মাত্রা ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে নির্ধারিত হবে।

চলুন দেখি আমরা কী পাই:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}
#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Результат: