අලවා තබන ලද CSS Grid

Grid පද්ධතිය තුළ, ඔබේම සාදන ලද ජාලකය තුළ නව අලවා තබන ලද grid එකක් එක් කිරීමේ හැකියාව ඇත. අලවා තබන ලද grid අඩවි බ්ලොක් තුළ කුඩා අංග ස්ථානගත කිරීම සඳහා බහුලව භාවිතා වේ. මෙම හැකියාව භාවිතා කිරීම සඳහා, ඔබට දරු අංගය තුළම display ගුණාංගය grid අගයට සකසන්න.

උදාහරණයක් වශයෙන්, අපි grid එකේ එක් සෛලයක තවත් grid එකක් නිර්මාණය කරමු:

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: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  border: 2px solid #696989;
}
#elem4 > div {
  grid-gap: 5px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: