# How to change Event Page to Grid

**URL:** <https://community.elfsight.com/t/how-to-change-event-page-to-grid/97689>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [January 30, 2025, 3:55am UTC](https://community.elfsight.com/t/how-to-change-event-page-to-grid/97689 "2025-01-30T03:55:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [January 30, 2025, 3:55am UTC](https://community.elfsight.com/t/how-to-change-event-page-to-grid/97689/1 "2025-01-30T03:55:11Z")

</div>

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

```auto
@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;
    }
  }}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/1/f168814930138e1524a6d32a3bb1d81170da32b5.jpeg)

Result

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/2/02a9347b783df5708178d30d2b6f44a7df5034d5.jpeg)

To change number of columns, change this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/5/4514451552ebb05c29d3f87aafca14b41e9547e8.jpeg)