使用CSS Grid将红色字段填充到Grid Attack级别77中的红色边框中

o75abkj4 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(96)

我被困在编码幻想：网格攻击水平77小时。我尝试了一切，到目前为止没有任何工作。游戏没有提供解决方案，我不能跳过的水平。有人知道解决方案吗？
我需要使用grid-auto-rows* cross-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>

型
我尝试了所有可能的值，但它不起作用

css

来源：https://stackoverflow.com/questions/75439076/use-css-grid-to-fit-the-red-field-into-the-red-border-in-grid-attack-level-77

1条答案

按热度按时间

6psbrbz91#

它真的很晚了，但如果你好奇，这是它。
真的很自豪，我解决了这个问题，除了文件。
老实说，这不是问题很难，但最初的代码给你是错误的，网格图形不显示行的高度。

#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：我目测了一下，猜到了高度。

其余的都是自我解释。

赞(0）回复(0）举报 2024-01-09

我来回答

使用CSS Grid将红色字段填充到Grid Attack级别77中的红色边框中

1条答案

相关问题

热门标签

最新问答