Ички CSS гридлар

Грид тизимида ўз яратилган торга яна янги ички грид қўшиш имкони мавжуд. Ички гридлар веб-саҳифа блоклари ичидаги кичкина элементларни жойлаштиришда кенг қўлланилади. Бу имкониятдан фойдаланиш учун, фарзанд элементнинг ўзида display хусусиятини 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;
}

Результат: