Плиточная раскладка без JavaScript

HTML

    
    <div class="my-grid">
        <div class="article">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci in explicabo sapiente nulla dolore consequatur aperiam molestiae! Adipisci, ad quibusdam?</p>
        </div>
        <div class="article">
            <h2>Ut, unde ad</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, unde ad. Ex rerum animi deleniti.</p>
        </div>
        ...
    </div>

Стили CSS

    
.my-grid {
  --gap: 1em;
  --columns: 3;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  display: column;
  columns: var(--columns);
  gap: var(--gap);
}

.my-grid > * {
  break-inside: avoid;
  margin-bottom: var(--gap);
  
}
.article {
    background-color: #FFF;
    border: 1px solid #999999;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.75rem;
}
    

Результат

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci in explicabo sapiente nulla dolore consequatur aperiam molestiae! Adipisci, ad quibusdam?

Ut, unde ad

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, unde ad. Ex rerum animi deleniti.

Velit quos a neque

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit quos a neque in atque pariatur officiis est itaque dolores consequatur?

Optio neque

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio neque repellendus rem voluptate ipsa placeat!

Est eaque deleniti

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est eaque deleniti sed vel aliquam dolorem voluptatibus explicabo fugiat atque magni.

Veniam, quaerat

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, quaerat.

Tempora, ducimus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis placeat in ullam excepturi laboriosam magnam, odit architecto velit illum laborum, aliquid libero, voluptatem quia quas aspernatur sint voluptatum optio quis ea! Dolorum deleniti tempora reprehenderit.

Atque expedita

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque expedita magni labore possimus tenetur sequi aut pariatur accusantium quod, quaerat sunt, sint quis doloremque odio? Fuga voluptatem unde rem delectus.

Atque expedita

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto magni perferendis repellendus vero, asperiores placeat eum debitis sapiente quibusdam voluptatem maxime enim deserunt sequi quasi autem incidunt recusandae voluptate nemo!