在网格攻击级别 77 中使用 CSS 网格将红色字段放入红色边框

Question

我在《编码幻想：网格攻击》77 级上卡了好几个小时。我尝试了一切，但到目前为止没有任何效果。游戏没有提供任何解决方案，而且我无法跳过该关卡。请问有人知道解决办法吗？ 😢

我需要使用 grid-auto-rows align-content 和 span 将红色土地放入下图中的红色边框中。

CSS

#field {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  /* type here */
  
}

#field div:nth-child(3n) {
  /* type here */
  
}

HTML

<div id="field">
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
</div>

我尝试了所有可能的值，但没有用

Answer 1

已经很晚了，但如果你好奇的话，就是这样了。

我非常自豪我没有查找就解决了这个问题。除了文档。

老实说，问题并不难，而是给您的初始代码是错误的，并且网格图形不显示行的高度。我不得不盯着它。

#field {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  /* type here */
  grid-auto-rows: 100px;
  gap: 15px;
  align-content: space-between;
}
  
#field div:nth-child(3n) {
  /* type here */
  grid-column: span 3; 
}

网格模板列：它被设置为自动填充，但这只会使项目占据所有空间。将其设置为自动适应

grid-auto-rows：我目测它并猜出了高度。

其余的都非常不言自明。