为什么在此网格布局中有空白单元格？

Question

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

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>

Answer 1

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

Answer 2

没有更多代码来审查它很难说，但看来您正在提取一些不良数据。正在创建块是因为它认为其中存在某些内容。

Souce Screen Shot