Use Grid on Toolset View

The following code snippets demonstrate a view using Grid css.

Loop Editor Markup

[wpv-layout-start]
	<div class="grid-container">
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="loop-item-in-all-years"]
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
	</div>
[wpv-layout-end]

CSS for Loop

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
    grid-gap: 80px;
}

@media only screen and (max-width: 1080px) {

  .grid-container {
     grid-gap: 40px;
  }
  
}

@media only screen and (max-width: 980px) {

  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
  
}

@media only screen and (max-width: 580px) {

  .grid-container {
    grid-template-columns: 1fr;
  }
  
}

Template for Loop Items

<a href="[wpv-post-url]" class="link-panel">
<div class="print-image-for-archive"> 
	[wpv-post-featured-image size="full"]
</div>
<div class="print-link-for-archive">[wpv-post-title output="sanitize"]</div>
</a>

CSS for Loop Items

.link-panel {
 display: flex;
 flex-direction: column;
 align-content: center;
 justify-content: space-between;
 background-color: #e6e7e6;
 border: 1px solid #bbb;
}

.link-panel:hover { 
     filter: brightness(95%);
}

.print-link-for-archive {
  color: #333 !important;
  font-size: 1.2vw;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

@media only screen and (max-width: 1440px) {
  
  .print-link-for-archive {
    font-size: 1.5vw;
  }

}

@media only screen and (max-width: 1080px) {
  
  .print-link-for-archive {
    font-size: 1.8vw;
    padding-top: 10px;
    padding-bottom: 15px;
  }

}

@media only screen and (max-width: 1080px) {
  
  .print-link-for-archive {
    font-size: 2.2vw;
  }

}

@media only screen and (max-width: 414px) {
  
  .print-link-for-archive {
    font-size: 4.5vw;
  }

}