To change Event Page to Card Layout, like this.
You can use this code to Custom CSS.
You can also use Event Calendar free widget so you can customize Event layout easier without using complex code.
@media screen and (min-width:768px) {
/* set 4 columns */
div.events-list div.eventlist {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 20px 20px;
margin-bottom: 20px !important;
}
article.eventlist-event {
margin: 0px !important;
flex-direction: column;
background-color: #dbe0dc;
}
/* thumbnails */
.eventlist-column-thumbnail {
width: 100% !important;
padding-bottom: 75% !important;
}
/* Text */
.eventlist-column-info {
width: 100% !important;
padding-left: 0 !important;
margin-top: 10px !important;
}
.eventlist-column-info>* {
margin-left: 10px !important;
margin-bottom: 10px;
}
/* hide divider */
hr.eventlist-past-upcoming-divider {
display: none !important;
}
}
To change number of columns, you can change this value.
To change space between items, change these.
