html - grid-column-end 属性留下空白区域

Question

我试图在水平线上显示容器的最后 3 个元素。 前 2 个占据固定空间，最后一个元素占据所有剩余列。

我正在尝试使用 CSS 网格实现此结果。

到目前为止，我已经能够在网格已满(超过 3 个元素)时制作工作原型(prototype)。

但正如您在下面的代码片段中看到的那样，如果元素少于 3 个，最后一列将在网格右侧结束，但会在网格中留下一个空隙。

我曾尝试指定 grid-column: auto/-1; 而不是 grid-column-end 但没有成功。

我正在使用 Chrome，但也在 Firefox 上测试过

是什么导致了这种差距，是否有仅使用 CSS 来修复它的好方法？

编辑:完成场景并添加预期结果

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
}

.demo>.demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main>.column:last-child {
  grid-column-end: -1;
}

.main>.column:nth-last-child(n+4) {
  display: none;
}

<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
  <div class="demo column">4</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
</div>

预期结果:

Answer 1

您正在使用此 CSS 隐藏元素。

.main > .column:nth-last-child(n+4) {
  display: none;
}

所以你只需要一些额外的调整:

1. 选择第一个 child 并添加 grid-column-start: 1; 使用

   .main > .column:first-child {
     grid-column-start: 1;
   }
   

2. 当第二个 child 是第一个可见 child 的 sibling 时，选择第二个 child ，并且 添加 grid-column-start: 2; 使用

   .main > .column:not(:nth-last-child(n+4)) + .column:nth-child(2) {
     grid-column-start: 2;
   }
   

结果:

.demo {
  max-width: 500px;
  background-color: #abcdef;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
}

.demo > .demo {
  background-color: #fedcba;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr;
  grid-gap: 1px;
}

.main > .column:first-child {
  grid-column-start: 1;
}

.main > .column:not(:nth-last-child(n+4)) + .column:nth-child(2) {
  grid-column-start: 2;
}

.main > .column:last-child {
  grid-column-end: -1;
}

.main > .column:nth-last-child(n+4) {
  display: none;
}

<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
  <div class="demo column">4</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
  <div class="demo column">3</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
  <div class="demo column">2</div>
</div>
<div class="demo main">
  <div class="demo column">1</div>
</div>