移动项目到网格的底部

我是相对新的HTML和目前正在做一个组合网站。

https://jsfiddle。net/2b4sead0/

.grid-container {
  background-color: rgb(222, 224, 202);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: inline-block;
}
.grid-item1 {
  padding: 1em;
  height: 33%;
  border: 1px solid black;
}
.grid-item2 {
  padding: 1em;
  height: 33%;
  border: 1px solid black;
}
.grid-item3 {
  padding: 1em;
  height: 33%;
  border: 1px solid black;
  text-align: center;
}

这是我目前掌握的信息。我想知道我如何才能使它，这样我就可以确保文本在一个网格的底部。

示例:我的网格是1列3行。当前文本位于每一行的顶部。但我想知道我如何能重新定位的文本，使他们彼此更接近(在这种情况下移动的“hi”的广场底部，所以它是正确的上方“我是andrew camilleri”)。同时，仍然使网格跨度为100%，这样当你在任何大小的屏幕上查看时，它会重新格式化。

提前谢谢。

###不需要在你的网格特定的CSS中做任何改变。

我建议您删除h2元素上的空白，并将。grid-item1类设置为

.grid-item1 {
  ...
  display: flex;
  align-items: flex-end;
}
.grid-item1__h2 { // Specific class for your h2 in case you want margins on other h2's
  margin: 0;
}

像这样https://jsfiddle。net/kLchzod3/1/