Blog layout must be set to full width. Then use flex to turn it into columns with different background colors, an icon before publish date, read more button and equal content height.

<style>
.colour-grid-blog .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
grid-auto-rows: 1fr;
}
.colour-grid-blog .et_pb_ajax_pagination_container > div {
display: none;
}
.colour-grid-blog article {
display: flex;
flex-direction: column;
padding: 30px;
background-color: #e1ebf0;
height: 100%;
margin-bottom: 0;
}
.colour-grid-blog article .post-meta {
order: 1;
}
.colour-grid-blog article .post-content {
order: 3;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.colour-grid-blog article .more-link {
margin-top: 2rem;
}
.colour-grid-blog article .post-meta .published {
display: inline-block;
}
.colour-grid-blog article .post-meta .published:before {
display: inline-block;
font-family: "ETModules";
content: "\7d";
color: #24404a;
margin-right: 10px;
}
.colour-grid-blog article .more-link {
display: inline-block;
position: relative;
border: 1px solid #24404a;
border-radius: 0px;
padding: 10px 38px;
align-self: flex-start;
transition: all 0.25s ease-in-out;
}
.colour-grid-blog article .more-link:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.colour-grid-blog article .more-link:before {
display: inline-block;
position: absolute;
left: 15px;
font-family: "ETModules";
content: "\35";
color: #24404a;
margin-right: 10px;
}
.colour-grid-blog .entry-featured-image-url {
margin-top: -30px;
margin-right: -30px;
margin-bottom: 1em;
margin-left: -30px;
}
.colour-grid-blog .et_pb_post a img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.colour-grid-blog article .entry-title {
font-size: clamp(1.125rem, 0.377vw + 1.05rem, 1.375rem);
}
@media (max-width: 980px) {
.colour-grid-blog .et_pb_ajax_pagination_container {
grid-template-columns:repeat(2, minmax(0, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.colour-grid-blog article .more-link {
margin-top: 60px;
}
}
@media (max-width: 767px) {
.colour-grid-blog .et_pb_ajax_pagination_container {
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
}
.colour-grid-blog article .more-link {
margin-top: 30px;
}
}
</style>Code language: HTML, XML (xml)