Реагируйте на сайт с шаблоном Гэтсби, посты в блогах не будут последовательно размещаться на странице, оставляя пробелы по некоторым причинам.

Question

Я использую шаблон gatsby html5up и пытаюсь решить проблему с неправильной укладкой блочных сообщений. В зависимости от размера экрана, есть пробелы из-за разной длины текста каждого сообщения. Я только догадываюсь, что это причина, потому что я прошел и сделал все изображения одинакового размера. Я пытался сделать каждый абзац одинаковой высоты, но это не помогло. Что мне нужно сделать, чтобы исправить это, чтобы оно не оставляло пробелов?

Код моей галереи:

                <article className="6u 12u$(xsmall) work-item" key={i}>
                    <div className="articleDiv">
                        <a
                            className="image fit thumb"
                            href={obj.source}
                            onClick={e => {
                                e.preventDefault();
                                this.toggleLightbox(i);
                            }}
                        >
                            <img src={obj.thumbnail} />
                        </a>

                        <h3>{obj.caption}</h3>
                        <p>{obj.description}</p>
                    </div>
                </article>

Вот html страницы для одного из постов :

<article class="6u 12u$(xsmall) work-item">
  <div class="articleDiv">
    <a class="image fit thumb" href="/static/15Fullsize-95788b0c2a3cd7f5b7be5197b162af0b.jpeg"><img src="/static/15Thumbnail-3f93874146f2072572920b9eb793a1cf.jpeg"></a>
    <h3>2005 Chevrolet Equinox LT AWD</h3>
    <p>Local vehicle with heated leather, moonroof, and lots more. Completely checked out, serviced, and inspected.  Only $4,995.  Gets around on the ice fantastic.</p>
  </div>
</article>

Вот скриншот разработчика, показывающий, как статьи не совпадают.

Answer 1

Эта библиотека для компоновки, вероятно, использует CSS float для построения сетки, и вам, вероятно, придется где-то использовать clearfix.

Если это правда, место под картой появляется, потому что эта карта выше, чем другие (мы видим, что текст имеет три строки, в то время как другие карты имеют две строки).