почему в этой сетке есть пустые ячейки?

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> s и удалите его.

Answer 2

Без кода для просмотра сложно сказать, но похоже, что вы извлекаете некоторые неверные данные. Блоки создаются, потому что он думает, что что-то есть.

Сюжетная съемка