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

Question

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

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

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

但正如您在下面的代码片段中看到的那样，如果元素少于 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

对于两个网格项目，网格中有一个间隙，因为您有从容器末端开始的 最后 child:

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

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

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

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

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

如果您希望最后一个 child 也占据第二列，那么不要这样：

grid-column-end: -1;

试试这个：

grid-column: 2 / -1;

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

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

或者如果你想要最后一个项目，当少于三个时，占据第二列然后而不是使用 :last-child，使用 nth-child()，像这样：

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

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

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

Answer 2

我认为你想要的是让第二个单元格在没有内容的情况下折叠起来。

你可以用

实现

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 3

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

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

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

Select 先 child 然后使用

添加 grid-column-start: 1;

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

Select 第二个 child 当它是第一个可见 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>

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

grid-column-end property is leaving an empty area

html

css

css-grid

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

grid-column-end property is leaving an empty area

html

css

css-grid

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