在CSS网格内放置文本和按钮[复制]

Question

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

嵌套网格的目的是有可能生成文本，并控制文本在网格元素中的位置。目前文本在顶部。

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

.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;
    }

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

Answer 1

我向网格父级添加了justify items:center，它似乎已经解决了这个问题。

css lang-css prettyprint-override">.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>