Iegultie CSS režģi

Režģu sistēmā ir iespēja pievienot savā izveidotajā tīklā jaunu iegultu režģi. Iegultie režģi tiek plaši izmantoti, lai izvietotu mazus elementus vietnes bloku iekšpusē. Lai izmantotu šo iespēju, ir nepieciešams pašā apakšējā elementā iestatīt īpašību display ar vērtību grid.

Piemēram, izveidosim vienā no režģa šūnām vēl vienu režģi:

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

Результат: