Can the masonry feature be used to style the Display Post plugin output

I'm guessing the answer is no, but I thought I would ask.

I use the Display Posts plugin to display grids of posts that look very similar to blog archive pages. I'm wondering if I can apply whatever code/css that GP uses on the blog pages to these Display Post grids.

I don't want to reinvent the wheel if the theme already lets me do this. But I'm doubtful that it can. Masonry seems a bit more complicated than just css.

This is the css I end up using to display the grid with Display Posts plugin.

/* display post plugin image grid*/
/* Grid style */
.display-posts-listing.grid {
	display: grid;
	grid-gap: 16px;
}

div.display-posts-listing.grid div.listing-item{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
		background-color:white;
}

.display-posts-listing.grid .title {
	display: block;
	padding: 10px 10px 0;
	font-weight:bold;
	font-family:Merriweather;
}

div.listing-item span.excerpt{
	padding:0 10px;
	display:block;
}

div.listing-item span.date{
	padding:0 0 0 10px;
	font-style:italic;
	color:gray;
	font-size:.8em;
  display: inline-block;
}

div.listing-item span.category-display a{
	font-style:italic;
	font-size:.7em;
	padding-left:10px;
	  display: block;
}

div.listing-item span.category-display a::before{
	content:"in ";
	color:gray;
		
}

div.listing-item span.category-display-label{
	font-style:italic;
	font-size:.8em;
		color:gray;
	display:none
}

.display-posts-listing.grid img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
}

@media (min-width: 600px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid.two-col {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid.four-col {
		grid-template-columns: repeat( 4, 1fr );
	}
}