CSS Grid搭配媒体查询时网格右侧底部出现多余间距问题

断点布局出现多余槽距和空白是三个问题叠加导致的：

• 媒体查询语法错误：没有给媒体查询规则加外层花括号，max-width: 999px和max-width:750px下写的所有网格规则根本没被浏览器解析，页面始终加载全宽状态4列网格的gap: 40px 35px、固定高度height: 1060px配置，和预期的2列、1列布局完全不匹配。
• 网格区域定义漏项：全宽布局里有占2*2位置的image命名区块，但999px、750px断点的grid-template-areas里完全没给这个区块留位置，浏览器会自动生成隐式网格行/列放置这个未被分配位置的元素，直接撑出多余空白。
• 750px断点没有重置间距和高度，会直接继承上层断点的列间距、高度规则，和1列布局适配冲突。

.categories-grid > .website-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "nails nails offers offers"
    "image image kids-img kids"
    "image image hair hair-img";
  gap: 40px 35px;
  height: 1060px;
}

@media only screen and (max-width: 999px) {
  .categories-grid > .website-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "nails nails"
      "image image"
      "kids-img kids"
      "hair hair-img"
      "offers offers";
    gap: 30px 25px;
    height: auto;
  }
}

@media only screen and (max-width: 750px) {
  .categories-grid > .website-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas:
      "nails"
      "offers"
      "image"
      "kids-img"
      "kids"
      "hair-img"
      "hair";
    gap: 20px;
    height: auto;
  }
}

• 所有媒体查询的判断条件后必须加{}，把对应断点下的样式规则包裹在块内，浏览器才能正确识别断点生效范围
• 使用grid-template-areas定义布局时，所有设置了grid-area的子项必须全部在模板中被分配位置，否则会触发生成隐式网格，出现意料之外的空白
• 小断点下如果需要调整间距、高度，要明确写出对应属性值，避免继承大断点下的固定值导致布局错位

内容的提问来源于stack exchange，提问作者emiller