CSS 网格 - 将项目移动到网格正方形的底部

Question

我对 HTML 比较陌生，目前正在制作一个投资组合网站。

.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”移动到正方形的底部，使其位于“i'm andrew camilleri”的正上方）。同时仍然使网格跨度为 100%，以便在您在任何尺寸的屏幕上查看时重新格式化。

提前致谢。

Answer 1

这不需要对您的特定网格进行任何更改 CSS。

我建议您删除 h2 元素的边距并将 .grid-item1 class 设置为

.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/

CSS 网格 - 将项目移动到网格正方形的底部

CSS Grid - Moving items to the bottom of grid-square

html

css

css-grid