为什么这个网格布局中有空白单元格？答案

【问题标题】：why are there blank cells in this grid layout?为什么这个网格布局中有空白单元格？
【发布时间】：2019-01-14 18:57:16
【问题描述】：

在故事的部分中，我使用了display: grid 和grid-auto-flow: dense;，但其中的<div>s 流动不正常：

http://www.chicagomag.com/Chicago-Magazine/January-2019/What-CTA-Workers-Know/index.php?previewmode=on&hide=on

我已经尝试了所有方法 - 更改列规则、row-gap 等。无法弄清楚为什么会有额外的空白。

这是css：

.q-section {
    transition: all 0.3s;
    margin: 10px;

    justify-content: center;
    align-items: center;

    display: grid;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); !important;
}


.q-section.active {
    padding-top: 20px;
    padding-bottom: 20px;
}

.q-section:not(:last-of-type) {
    padding-bottom: 10px;
}

.q-section > div {
    font-family: "proxima-nova";
    padding: 15px;
    grid-row-end: auto;
    color: #555;
}

和html：

<div class="q-section">

        <div><img src="icons.png" style="width: 100%; max-width: 300px; margin: 0 auto;"></div>


        <div>What makes my day  is a person who says, “Have a great day,”  and then goes and  sits their ass down.</div>

        <div class="purple">I let them vent. I understand, I’ve ridden the bus. You’re out there freezing your tail off. “Man, where the hell have you been?” Usually a couple minutes later, they’ll come up and be like, “Hey, sorry about that.”</div>
        <div>In the morning I got over a thousand people on the train, and pretty much every one of them have headphones on. People don’t talk anymore.</div>
        <div>Some drivers just face straight forward. As long as they hear that Ventra card going off, they don’t care. But I can’t help myself. I have to talk to people. </div>
...
</div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

已解决：从源 Word 文档复制的不可见字符保留了自己的空格。解决方案：只需选择<div>s 之间的任何内容并将其删除。

【讨论】：

【解决方案2】：

没有更多的代码来审查它很难说，但看起来你正在提取一些糟糕的数据。正在创建块是因为它认为存在某些东西。

Souce Screen Shot

【讨论】：

好吧，发布您的代码，以便其他人可以看到发生了什么。
已解决：从源 Word 文档复制的不可见字符保留了自己的空格。解决方案：只需选择<div>s 之间的任何内容并将其删除即可。