CSS grid让子元素div的高度填满父容器的剩余空间

使用CSS Grid布局同样可以实现子元素div的高度填满父容器的剩余空间。具体实现方法如下：

1. 在父容器上设置 display: grid; 使其成为一个Grid容器。

2. 在父容器上设置 grid-template-rows: 1fr auto;，其中1fr表示剩余空间的比例分配给子元素，auto表示其他子元素的高度根据内容自适应。

3. 在子元素上设置 grid-row: 1 / span 1;，使其占据第一行，且跨越1个网格。

示例代码如下：

.parent {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 500px;
}

.child {
  grid-row: 1 / span 1;
}

需要注意的是，CSS Grid布局相对于CSS Flexbox布局来说更加灵活、强大，但也更加复杂，需要更多的学习和实践。