如何在 CSS 网格中使用 justify-content: end 和 1fr？答案

【问题标题】：How to use justify-content: end in conjunction with 1fr in CSS grids?如何在 CSS 网格中使用 justify-content: end 和 1fr？
【发布时间】：2020-08-02 08:58:50
【问题描述】：

我了解fr 是根据网格容器中的可用空间计算得出的。我有一个网格容器，我想分成 5 列。然而，孩子是动态生成的，根据情况，它可能是 3 个孩子或 4 个或 5 个孩子。我仍然希望使用指定的grid-column-gap 保持 5 列网格完整，但我希望网格开始填充右边的元素。请在下面查看我的代码：https://codepen.io/skepticacid/pen/dyGxaJb

<html>
  <body>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
      <div class = "grid-child">4</div>
      <div class = "grid-child">5</div>
    </div>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
      <div class = "grid-child">4</div>
    </div>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
    </div>
  </body>
</html>

html{
  font-size: 16px;
}
.grid-container {
  background-color: coral;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1rem;
  justify-content: end;
  align-items: center;
  padding: 1rem;
  margin-bottom: 2rem;
}
.grid-child{
  background-color: saddlebrown;
  color: white;
  padding: 1rem;
}

5 个元素是幸福的道路。但是，当归结为 4 或 3 个元素时，我希望它们与 justify-content:end 或 flex-end 类似（因此在 4 列示例中，我希望 div 编号 4 与 div 编号 5 对齐多于）。另外，我还想保留列的宽度以匹配 5 列宽度中的宽度。

这可以通过 CSS 网格实现吗？抱歉，如果我遗漏了一些明显的东西。

【问题讨论】：

标签： html css css-grid

【解决方案1】：

在 CSS-Grid 中没有 reverse the flow 这样的属性。

一种解决方案（不能很好地扩展）是在这种情况下使用nth-last-child 来指定需要哪一列。

html{
  font-size: 16px;
}
.grid-container {
  background-color: coral;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: .25rem;
  padding: 1rem;
}
.grid-child{
  background-color: saddlebrown;
  color: white;
  padding: 1rem;
}

.grid-child:nth-last-child(1) {
  grid-column:5;
}
.grid-child:nth-last-child(2) {
  grid-column:4;
}
.grid-child:nth-last-child(3) {
  grid-column:3;
}

.grid-child:nth-last-child(4) {
  grid-column:2;
}
.grid-child:nth-last-child(5) {
  grid-column:1;
}

<html>

<body>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
    <div class="grid-child">4</div>
    <div class="grid-child">5</div>
  </div>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
    <div class="grid-child">4</div>
  </div>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
  </div>
</body>

</html>

【讨论】：

感谢您的回答。这现在对我有用。你让我想到了——使用 flexbox 是否可以达到相同的结果？
除非元素是固定大小的。

【解决方案2】：

如果你想要这种方式

direction: rtl;

如果方向有问题希望能解决。

最后一个答案：

justify-items: center;

没关系。

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习
抱歉，我可能没有关注某些内容。 justify-items 仅调整网格列内每个子项的位置。我正在研究如何调整整个网格的起点。

【解决方案3】：

我们可以使用auto-fit，它只在需要时创建列，这与auto-fill 不同，而当前设置即使在不需要时也会创建列。

如果我们知道我们将拥有的最大列数，这将起作用，我们将使用 5。

我们的grid-template-columns becomes 是这样的：

grid-template-columns: repeat(auto-fit, minmax(0px,calc((100% - ( .25rem * 4)) / 5)));

我们从父级的宽度计算5列，而不是预定义的5列，减去grid-gap

最后我们申请justify-content: flex-end;

.grid-container {
    background-color: coral;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0,calc((100% - ( .25rem * 4)) / 5)));
    grid-gap: .25rem;
    padding: 1rem;
    justify-content: flex-end;
}

.grid-child {
    background-color: saddlebrown;
    color: white;
    padding: 1rem;
}

<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
  <div class="grid-child">5</div>
</div>
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
</div>
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
</div>

【讨论】：