How to change Event Page to Grid

[tuanphan]

To change Event Page to Grid, we can use this code to Custom CSS

@media screen and (min-width:768px) {
div.eventlist {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px 10px;
}
article.eventlist-event {
    flex-direction: column;
    margin: 0px !important;
}
article.eventlist-event>* {
    width: 100% !important;
}
/* change event image ratio */
.eventlist-column-thumbnail {
    padding-bottom: 100% !important;
}
/* Overlay over image */
.eventlist-column-thumbnail:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
}
/* move event info over image */
.eventlist-column-info {
    padding: 10px !important;
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 999999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}
.eventlist-column-info * {
    color: #fff !important;
    border-color: #fff !important;
}
article.eventlist-event:hover {
    .eventlist-column-thumbnail:after, .eventlist-column-info {
         opacity: 1;
    transition: all 0.3s ease;
    }
  }}

Result

To change number of columns, change this