CSS响应网格

Question

我有一个由以下css定义的网格布局，有6个不同的网格区域可以填充。当我调整页面大小时，区域f（占据整个页脚）似乎没有响应，但是所有其他元素都调整得很好。基本上，当我使浏览器变小时，底行就会消失。这是我的代码：

.wrapper {
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0 auto;
  padding: 0 auto;
  grid-template-areas: "a a a a a a a b" "c c c c c c c b" "d d d d d e e e" "d d d d d e e e" "d d d d d e e e" "f f f f f f f f";
  left: 0px;
  right: 0px;
  position: absolute;
  margin-top: 85px;
  margin-bottom: 0px;
  width: 100%;
}

.item1 {
  grid-area: a;
  border: 1px solid lightslategray;
  padding: 0;
}

.item2 {
  grid-area: b;
  border: 1px solid lightslategray;
  padding: 0;
}

.item3 {
  grid-area: c;
  border: 1px solid lightslategray;
  padding: 0;
}

.item4 {
  grid-area: d;
  border: 1px solid lightslategray;
  padding: 0;
}

.item5 {
  grid-area: e;
  border: 1px solid lightslategray;
  padding: 0;
}

.item6 {
  grid-area: f;
  border: 1px solid lightslategray;
  padding: 0;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
  <div class="item6">Item 6</div>
</div>

为什么区域f保持锁定，而其他5个区域响应浏览器大小更改？