Question

我为未知数量的自动放置的孩子定义了一个网格：

grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));

我需要自动放置最后一个孩子（这意味着它从前一个孩子之后的列开始，或者如果前一个孩子在最后一列中，则从第一列的新行开始）。上面的CSS行可以解决这个问题。现在如何让最后一个孩子填满剩余的空间（直到最后一列），无论它从哪一列开始？

我尝试给孩子grid-column-end: -1;，但这只是将其放在最后一栏中。

是否可以让最后一个孩子填补剩余空间而无需手动添加断点或JavaScript？

Answer 1

我不知道纯粹的CSS解决方案，但这是实现它的JS方法。

// Select Grid Container
let ctr = document.querySelector('[ctr]');
// Find how many Columns there is
let colCount = getComputedStyle(ctr).getPropertyValue('grid-template-columns').split(' ').length;
// Find how many elements there is
let elCount =  ctr.children.length;
// Find which column the last element is in
let lastElementColStart = elCount % colCount;
// Set it's start column to be the column it is
ctr.children[elCount - 1].style.gridColumnStart = lastElementColStart;
// Set it's end column to be the last one
ctr.children[elCount - 1].style.gridColumnEnd = colCount + 1;

[ctr] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

[ctr]>div {
  height: 30px;
  border: 1px solid;
}

[ctr]>div:last-child {
  background: red;
}

<div ctr>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

注意：，您将需要在屏幕大小调整时重新运行代码（我会留给您）

CSS网格：让最后一个自动放置的子项填充剩余的列

1 个答案: