如何在CSS网格中将文本元素与右下角对齐？

Question

我希望文本中的.form col-1位于右侧botom：

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
}
.form-col-1 {
  grid-column: col-start / span 5;

}
.form-col-2 {
  grid-column: col-start 6 / span 7 ;
}

Answer 1

您可以在第一列上使用Flexbox，并将justify-content和align-items设置为flex-end。

.wrapper {
  grid-template-columns: 7fr 5fr;
  grid-auto-rows: 50px;
  display: grid;
  grid-gap: 20px;
}
.form-col-1 {
  border: 1px solid black;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

}
.form-col-2 {
  border: 1px solid black;
}

<div class="wrapper">
  <div class="form-col-1">Col 1</div>
  <div class="form-col-2">Col 2</div>
  <div class="form-col-1">Col 3</div>
  <div class="form-col-2">Col 4</div>
</div>