如何右对齐不完整的 CSS 网格行？

Question

我有未知数量的项目将显示在网格中。当一行不完整时，就像屏幕截图中显示的第二行一样，我需要将项目向右对齐。

我可以使用 达到效果direction: rtl，但这会改变项目的顺序，这是我不想做的。

我怎样才能做到这一点？此处可使用 Codepen 进行故障排除：https://codepen.io/keefblurgu/pen/gOvzWbw

编辑：添加了堆栈片段

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid > div {
  padding: 10px;
  text-align: center;
  background-color: coral
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Answer 1

我也有这个疑问。假设布雷特·唐纳德的评论是正确的，并且目前不支持这一点，其他人可能会发现下面的解决方案很有帮助。这是一个不太疯狂的黑客行为；如果您有一个具有固定列数的网格，大约 12 行 JavaScript 应该可以工作。它使用 VueJS，但希望对于那些不熟悉 Vue 的人来说足够清晰。关键思想是：

(1) 使用您想要看到的最终顺序为网格中的每个元素创建一个索引值数组 - 例如，array = [1, 2, 3, 4, 5, 6, 7, 8]。

(2) 对数组进行排序，使每行索引值反转，从而在最终的网格布局中以正确的顺序出现。

(3) 使用已排序的数组对元素重新排序。

(4) 用于direction: rtl;右对齐元素。它们现在以正确的顺序显示。

<template>
  <main>
    <div v-for="i in array">{{ i }}</div>
  </main>
</template>

<script setup>
let array = [1, 2, 3, 4, 5, 6, 7, 8];
(function () {
  array.reverse();
  const length = array.length;
  const columns = 5;
  const groups = Math.ceil(length / columns);
  for (let i = 0; i < groups; i++) {
    const startIndex = Math.max(0, length - (i + 1) * columns);
    const endIndex = length - i * columns;
    const group = array.slice(startIndex, endIndex);
    group.reverse();
    array.splice(startIndex, group.length, ...group);
  }
})();
array.reverse();
</script>

<style scoped>
main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  direction: rtl;
  gap: 1rem;
}
div {
  margin-bottom: 1rem;
  text-align: center;
  padding: 10px;
  background-color: coral;
}
</style>

元素网格右对齐