如何解决 CSS Grid Critters 9.3 上的对齐问题

【问题标题】：How to solve alignment issue on CSS Grid Critters 9.3如何解决 CSS Grid Critters 9.3 上的对齐问题
【发布时间】：2019-12-30 07:53:26
【问题描述】：

需要帮助解决CSS Grid Critters 9.3

我可以让网格模板线正确匹配，但底部的项目行不对齐。

这是我得到的：

planet {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50% auto;
  justify-content: space-evenly;
  justify-items: end;
  align-content: space-between;
}

但最后一行似乎不合适。尝试将样式应用于

dunes {}

和

water {}

但这只是弄乱了第一行。在课间来回挣扎无济于事。

【问题讨论】：

标签： css css-grid grid-layout

【解决方案1】：

最后，在复习了之前的课程后，它让我印象深刻。我需要测试 align-items 属性。

This solution worked!

planet {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50% auto;
  justify-content: space-evenly;
  justify-items: end;
  align-content: space-between; /***this is the key***/
}

事实证明，justify-content 和 align-content 共同控制内容项周围的空间，即“盒子”或“轨道”。默认情况下，justify-content 处理左/右空间，而align-content 处理顶部/底部空间。

另一方面，justify-items 和align-items 控制项目在盒子或轨道内的实际位置。值得一提的是align-items会甩掉顶行的位置，所以不要用。 Justify-items 固定最上面一行，但不去掉最下面一行。

【讨论】：