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

Question

需要帮助解决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 {}

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

Answer 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固定最上面一行，而不会抛出最下面一行。