grid-column-end属性离开空白区域

Question

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

我试图用CSS网格实现这个结果。

到目前为止，当网格已满（超过3个元素）时，我已经能够进行工作原型。

但正如您在下面的代码段中所看到的，如果小于3个元素，则最后一列在网格右侧结束，但在网格中留下间隙。

我尝试过指定grid-column: auto / -1;代替grid-column-end而没有运气。

我正在使用Chrome，但也在Firefox上进行了测试

可能导致这种差距的原因是什么？只使用CSS修复它？

编辑：完成了方案并添加了预期结果

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

预期结果：

Answer 1

我认为如果没有内容，你想要的是让第二个细胞崩溃。

你可以用

来实现它

grid-template-columns: 100px auto 1fr;

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

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

.main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 1px;
}

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

.main > .column:nth-last-child(n+2) {
  width: 100px;
}

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

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>
<div class="demo main">
    <div class="demo column">5</div> 
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

Answer 2

您正在使用此CSS隐藏项目。

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

所以你只需要进行一些额外的调整：

1. 选择第一个孩子并使用

   添加grid-column-start: 1;

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

2. 选择第二个孩子，当它是第一个可见的孩子和孩子的兄弟 使用

   添加grid-column-start: 2;

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

结果：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

有两个网格项，网格中存在间隙，因为从容器末尾开始有最后一个孩子：

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

当容器中至少有三个项目时，这可能很有效，因为所有单元格都被占用。但是如果少于三个，grid-column-end: -1会将最后一项移到最后一列。 （Negative integers begin the count from the end of the container.）

您展示了两个问题。即使有一个项目也存在同样的问题：

＆＃13;

＆＃13;

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

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

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

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

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

＆＃13;

<div class="demo main">
  <div class="demo column">7</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望最后一个孩子也占据第二列，那么请改为：

grid-column-end: -1;

试试这个：

grid-column: 2 / -1;

＆＃13;

＆＃13;

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

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

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

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


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

＆＃13;

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果您想要最后一项（当少于三项时）占用第二列，而不是使用:last-child，请使用nth-child()，如下所示：

.main > .column:nth-child(3) {
  grid-column-end: -1;
}

＆＃13;

＆＃13;

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

.main>.column:nth-child(3) {
  grid-column-end: -1;
}

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

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


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

＆＃13;

<div class="demo main">
  <div class="demo column">6</div>
  <div class="demo column">7</div>
</div>

＆＃13;

＆＃13;

＆＃13;