避免在网格 CSS/HTML 中创建空单元格 [重复]答案

【问题标题】：Avoid creating empty cells in grid CSS/HTML [duplicate]避免在网格 CSS/HTML 中创建空单元格 [重复]
【发布时间】：2021-09-19 10:29:42
【问题描述】：

以下或多或少是我想要的，但并不完美：网格中有间隙：

Grid with gaps

有没有办法避免这些差距？这可以用纯 CSS 完成吗？请在下面找到我的 HTML 和 CSS：

HTML：

<div class="image-canvas">
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    <div class='placeholder'></div>
    ...
</div>

CSS：

.image-canvas {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 80px));
    grid-template-rows: repeat(auto-fill, minmax(80px, 0));
    justify-content: space-evenly;
    grid-gap: 5px;
}

.placeholder:nth-child(3n+2) {
    grid-row: span 2;
    grid-column: span 2;
}

干杯！

【问题讨论】：

标签： html css css-grid

【解决方案1】：

好吧，对于任何想知道未来的人，您需要将grid-auto-flow: dense; 添加到网格容器中。来自：

.image-canvas {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 80px));
    grid-template-rows: repeat(auto-fill, minmax(80px, 0));
    justify-content: space-evenly;
    grid-gap: 5px;
}

到：

.image-canvas {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 80px));
    grid-template-rows: repeat(auto-fill, minmax(80px, 0));
    justify-content: space-evenly;
    grid-gap: 5px;
    grid-auto-flow: dense; 
}

【讨论】：