将文字和按钮放在CSS网格内

Question

我正在制作CSS网格，现在尝试在元素内部制作一些嵌套的网格。

嵌套网格的目的是可以制作文本，并控制文本在grid元素中的位置。目前，文本位于顶部。

如何使文本在网格元素的中心或底部对齐？

let day = Calendar.current.component(.day, from: Date())
let month = Calendar.current.component(.month, from: Date())
var todaysDate = month*100+day

.wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
      background-color: #fff;
      border: 10px solid #fff;
    } 
.nested {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .nested > div {
        border: 1px solid red;
    }
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/7;
      height: 700px;
      background-color:blue;
    }
    .item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      background-color:yellow;
    }

Answer 1

我在网格父级中添加了justify-items: center，看来已经解决了该问题。

.nested {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
    }
    .nested > div {
        border: 1px solid red;
    }
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/7;
      height: 700px;
      background-color:blue;
    }
    .item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      background-color:yellow;
    }

<div class="wrapper">
    <div class="item1">
        <div class="nested">
            <div>Lorem column 1</div>
            <div>Lorem column 1</div>
            <div>Lorem column 1</div>
        </div>
    </div>
    <div class="item2 bg-img">
        <div class="nested">
            <div>Lorem column 2</div>
            <div>Lorem column 2</div>
            <div>Lorem column 2</div>
        </div>
    </div>
    
</div>