CSS网格布局最后一项中心[重复]

我有一个网格布局共 2 列。我有5 div , my 5th div来吧left我想要我的5th div to be centered.

我怎样才能使用任何实现这一点网格属性?

我的输出：

这就是我要的：

这是我的代码：

<style>
        .container{
            display: grid;
            grid-template-columns: 200px 200px;
            gap: 10px;
        }

        .box{
            padding: 20px;
            background-color: burlywood;
            border: 1px solid red;
        }
</style>

<div class="container">
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
</div>

你可以选择最后一个.box在 DOM 中跨越两列。

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 10px;
}

.box {
  padding: 20px;
  background-color: burlywood;
  border: 1px solid red;
}

.container .box:last-child {
 justify-self: center;
 width: calc(200px - 20px);
 grid-column-start: span 2;
}

<div class="container">
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
</div>

这里要查看的主要代码是：

.container .box:last-child {
 justify-self: center;
 width: calc(200px - 20px);
 grid-column-start: span 2;
}

grid-column-start告诉浏览器渲染最左侧的位置.box从基于您的网格开始。使用span 2说.box将从其自然位置开始并跨越 2 列。