使用CSS网格时，网格容器的高度由其内容的高度确定。在您的示例中，“main”标记是网格容器的内容，它不会将“footer”推到底部，因为“main”标记的高度未设置为100%。
若要解决此问题，可以将“main”标记高度设置为100%。此外，请确保通过添加“grid-row：”将“footer”标记放置在网格的第二行中。2;“添加到其CSS。
下面是一个更新的代码片段，应该适合您：

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding-top: 2.7rem;
  display: grid;
  grid-template-rows: auto 6.1rem;
  min-height: 100%;
}

main {
  height: 100%;
}

footer {
  grid-row: 2;
}

请注意，对于“body”标记，使用“min-height”属性而不是“height”，以确保即使内容不足以填充整个高度，它也能填充整个页面。