CSS Subgrid

Subgrid là một biến thể của lưới lồng nhau, nhưng không giống như lưới lồng nhau, nó ảnh hưởng đến kích thước của phần tử cha chứa lưới. Để thiết lập một subgrid, bạn cần đặt thuộc tính display với giá trị subgrid trong chính phần tử con.

Ví dụ, hãy tạo một lưới lồng nhau trong phần tử thứ tư:

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

Результат: