I am using bootstrap card-columns to create a masonry grid and this is what I have:

<div class="card-columns">
          <div class="card" style="margin-bottom: 30px;">
            <div class="card-body" style="border: 1px solid #707070; border-radius: 5px;">
              <div class="resources-img" style="background:url(news1.png); background-size: cover; background-position: center; height: 320px;"></div>
              <div style="padding-left: 15px; padding-right: 15px;">
                <h3 class="card-title" style="color: #414141; font-size: 24px; padding-top: 20px;">WAY LONGER NEWS TITLE <span style="color: #B01C87;">GOES HERE</span> OR ANY SHORT DESCRIPTION</h3>
                <span style="padding-bottom: 20px; color: #B01C87; display: block;">00/00/0000</span>
                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...</p>
              </div>
            </div>
          </div>
          <div class="card" style="margin-bottom: 30px;">
            <div class="card-body" style="border: 1px solid #707070; border-radius: 5px;">
              <div style="padding-left: 15px; padding-right: 15px;">
                <h3 class="card-title" style="color: #414141; font-size: 24px; padding-top: 20px;">WAY LONGER NEWS TITLE <span style="color: #B01C87;">GOES HERE</span> OR ANY SHORT DESCRIPTION</h3>
                <span style="padding-bottom: 20px; color: #B01C87; display: block;">00/00/0000</span>
                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...</p>
              </div>
            </div>
          </div>
          <div class="card" style="margin-bottom: 30px;">
            <div class="card-body" style="border: 1px solid #707070; border-radius: 5px;">
              <div class="resources-img" style="background:url(news1.png); background-size: cover; background-position: center; height: 320px;"></div>
              <div style="padding-left: 15px; padding-right: 15px;">
                <h3 class="card-title" style="color: #414141; font-size: 24px; padding-top: 20px;">WAY LONGER NEWS TITLE <span style="color: #B01C87;">GOES HERE</span> OR ANY SHORT DESCRIPTION</h3>
                <span style="padding-bottom: 20px; color: #B01C87; display: block;">00/00/0000</span>
                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...</p>
              </div>
            </div>
          </div>
          <div class="card" style="margin-bottom: 30px;">
            <div class="card-body" style="border: 1px solid #707070; border-radius: 5px;">
              <div class="resources-img" style="background:url(news1.png); background-size: cover; background-position: center; height: 320px;"></div>
              <div style="padding-left: 15px; padding-right: 15px;">
                <h3 class="card-title" style="color: #414141; font-size: 24px; padding-top: 20px;">WAY LONGER NEWS TITLE <span style="color: #B01C87;">GOES HERE</span> OR ANY SHORT DESCRIPTION</h3>
                <span style="padding-bottom: 20px; color: #B01C87; display: block;">00/00/0000</span>
                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...</p>
              </div>
            </div>
          </div>
          <div class="card" style="margin-bottom: 30px;">
            <div class="card-body" style="border: 1px solid #707070; border-radius: 5px;">
              <div style="padding-left: 15px; padding-right: 15px;">
                <h3 class="card-title" style="color: #414141; font-size: 24px; padding-top: 20px;">SHORT NEWS TITLE <span style="color: #B01C87;">GOES HERE</span> OR ANY SHORT DESCRIPTION</h3>
                <span style="padding-bottom: 20px; color: #B01C87; display: block;">00/00/0000</span>
                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod...</p>
              </div>
            </div>
          </div>
          <div class="card" style="margin-bottom: 30px;">
            <div class="card-body" style="border: 1px solid #707070; border-radius: 5px;">
              <div class="resources-img" style="background:url(news1.png); background-size: cover; background-position: center; height: 320px;"></div>
              <div style="padding-left: 15px; padding-right: 15px;">
                <h3 class="card-title" style="color: #414141; font-size: 24px; padding-top: 20px;">WAY LONGER NEWS TITLE <span style="color: #B01C87;">GOES HERE</span> OR ANY SHORT DESCRIPTION</h3>
                <span style="padding-bottom: 20px; color: #B01C87; display: block;">00/00/0000</span>
                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...</p>
              </div>
            </div>
          </div>
        </div>

This works well, but it puts my columns in random order, which is weird as these will need to be in order of date (eventually)

Here is my additional CSS:

<style>
      .card-columns {
        column-count: 3;
      }
      .card {
        break-inside: avoid-column;
      }
    </style>