Ichma-chashma CSS gridlari

Grid tizimida o‘zingiz yaratgan setkaga yangi ichma-chashma grid qo‘shish imkoniyati mavjud. Ichma-chashma gridalar sayt bloklari ichidagi kichik elementlarni joylashtirishda keng qo‘llaniladi. Ushbu imkoniyatdan foydalanish uchun, farzand elementning o‘zida display xususiyatiga grid qiymatini berish kerak.

Misol uchun, keling gridning biror katagiga yana bir grid yaratamiz:

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

Результат: