求Coding Fantasy Grid Attack第77关CSS Grid布局解决方案

根据关卡要求，结合grid-auto-rows、align-content和span属性，以下是能让redLand适配红色边框的完整CSS代码：

#field {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-auto-rows: 50px;
  align-content: start;
}

#field div:nth-child(3n) {
  grid-row: span 2;
}

代码说明： #

• grid-auto-rows: 50px：定义网格自动生成的行高，若红色区域仍不贴合边框，可微调此数值（比如40px/60px），直到匹配红色边框的高度。
• align-content: start：让网格内容从容器顶部开始排列，避免多余空白导致布局错位。
• grid-row: span 2：选中每第3个元素（对应HTML中的redLand），使其跨越2行高度，刚好填充红色边框的纵向空间。

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