如何将空行插入动态列CSS网格？

Question

我正在使用一个 CSS 网格，它可以动态地将单元格横跨整个单元格，如果没有剩余空间，则断行到新行。到目前为止一切顺利（见下文）：

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
}

但现在我想从头开始插入一个横跨整个行的空行。像这样：

a   a   a   a
a   a   a
X   X   X   X
a   a   a   a
a   a

这可以通过 CSS 网格实现吗？如何实现？

感谢您的支持！

Answer 1

当然你可以通过使用

grid-column: 1 / -1;

来实现

.grid-container > div:nth-child(7) { /*  add your required row to fill */
    grid-column: 1 / -1;
}