对于"display:grid"，有没有类似于"justify-content:end&q

Question

我想把网格项向右对齐，所以左边的空间是空的，但似乎没有任何属性可以实现。

.container {
border: 1px solid black;
width: 400px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.justify {
justify-content: end;
}
.flex {
display: flex;
}
.item {
width: 100px;
border: 1px solid red;
}

<div class="container grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container grid justify">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container flex justify">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

我想要恒定数量的列，但不同数量的项和项应该向右对齐。

const grids = document.querySelectorAll('.grid')
addEventListener('click', () => {
grids.forEach(grid => {
const item = document.createElement('div')
item.className = 'item'
item.textContent = 'x'
grid.appendChild(item)
})
})

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border: 1px solid black;
}
.mirror {
transform: scaleX(-1);
}
.item {
border: 1px solid red;
}

Click anywhere
<br> What I can do:
<div class="grid"></div>
What I want:
<div class="grid mirror"></div>

Answer 1

您可以改变方向以获得您想要的东西，但不会获得相同的订单。

const grids = document.querySelectorAll('.grid')
addEventListener('click', () => {
grids.forEach(grid => {
const item = document.createElement('div')
item.className = 'item'
item.textContent = 'test'
grid.appendChild(item)
})
})

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border: 1px solid black;
direction: rtl;
}
.item {
border: 1px solid red;
direction: ltr;
}

Click anywhere
<br> What I can do:
<div class="grid"></div>

Answer 2

只需指定要从以下列开始：

.grid div:first-child{
grid-column-start: 2;

}

https://jsfiddle.net/GetafixIT/awf2v3Ls/