Вгнездени 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;
}

Результат: