CSS-এ সাবগ্রিড

সাবগ্রিড একটি নেস্টেড গ্রিডের বৈচিত্র্য, কিন্তু এর বিপরীতে এটি প্যারেন্ট গ্রিড কনটেইনার এর আকারকে প্রভাবিত করে। সাবগ্রিড সেট করতে, চাইল্ড এলিমেন্টে display প্রপার্টি subgrid মান সহ সেট করতে হবে।

উদাহরণস্বরূপ, চতুর্থ এলিমেন্টে একটি নেস্টেড গ্রিড তৈরি করা যাক:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 5px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem4 {
  display: subgrid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  border: 2px solid #696989;
  padding: 5px;
}
#elem4 > div {
  grid-gap: 5px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: